I'm new.when I'm using bootstrap slide show and owl-carousel then bootstrap slide show take owl-carousel CSS how to use that.
carousel item.
<div class="carousel">
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
</div>
bootstrap slide show
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/baner.png" alt="Chania">
</div>
<div class="item">
<img src="images/baner.png" alt="Chania" >
</div>
<div class="item">
<img src="images/baner.png" alt="Flower" >
</div>
<div class="item">
<img src="images/baner.png" alt="Flower" >
</div>
</div>
</div>
Well, maybe it depends in what order you are calling your steelsheets. Whithout any code it will be hard to help you.
In my projects I proceed this way
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="web/lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="web/lib/owlcarousel/css/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="web/lib/owlcarousel/css/owl.theme.css">
</head>
<body>
<div>
<!-- your bootstrap slider -->
</div>
<div>
<!-- your owl slider -->
</div>
<script type="text/javascript" src="web/lib/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="web/lib/owlcarousel/js/owl.carousel.js"></script>
<!-- init owl -->
<script type="text/javascript">
$('.myOwlCarousel').owlCarousel({
// some configs
});
</script>
</body>
</html>
Related
I have a figure and a figcaption and I would like to have one picture and when I click on it, have more thumbnails/pictures.
My figure :
<!-- Bootstrap CSS -->
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<div class="col-6 col-lg-3">
<figure>
<figcaption>
<h3>project</h3>
<h4>project test</h4>
<img src="https://picsum.photos/300/100" alt="loupe.svg">
</figcaption>
<br>
<img src="https://picsum.photos/300/101" alt="imagexs.jpg">
</figure>
</div>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 4 JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Thank you.
One way you could do it would be to set the intital display of images to none and on click display them
$(document).ready(function() {
var MoreImages = document.getElementById("moreImages");
var ShowImages = document.getElementById("showImages");
MoreImages.style.display = "none";
ShowImages.addEventListener("click", function() {
document.getElementById("moreImages").style.display = "";
});
});
img {
height: 150px;
width: 150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 4 JS -->
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<figure>
<figcaption>
<h3>project</h3>
<h4>project test</h4>
<span id="showImages"
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</figcaption>
<div class="row" id="moreImages">
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
</div>
</figure>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
When I click on the image itself, the lightbox loads but the image itself doesn't - instead, all I see is a white box. Basically, the lightbox shows up, but the image doesn't load. I'm not sure what I am doing wrong. I watched a youtube video on how to create a lightbox and followed the steps exactly. I don't know what I am doing wrong. I included the links to the proper javascript and css files.
Please help!!
This is my html below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description:" content="Image Gallery">
<meta http-equiv="author" content="Fiona Blumin" />
<title>Image Gallery</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="lightbox.min.css" type="text/css">
<script type="text/javascript" src="lightbox-plus-jquery.min.js"></script>
</head>
<body>
<div class="Welcome">
<h1>My Travels through Europe</h1>
</div>
<div class="Pictures">
<div class="container-fluid">
<div class="row">
<div class="col">
<a href="images/pic1.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic1 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic2.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic2 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic3.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic3 copy.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col">
<a href="images/pic4.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic4 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic5.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic5 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic6.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic6 copy.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col">
<a href="images/pic7.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic7 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic8.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic8 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic9.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic9 copy.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col">
<a href="images/pic10.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic10 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic11.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic11 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic12.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic12 copy.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
</body>
</html>
This how it looks when I click on an image in my gallery:
maybe this is the problem
src="images/pic1 copy.jpg"
try to do it like this
src="images/pic1copy.jpg"
and make sure you are targeting the right picture with the right path. Let me know if it works
I am building a static e-commerce website using bootstrap. I want 2 product in a row while it opens in the phone and 4 product in a row while open in desktop or i-pad.
<div class="container">
<div class="row product">
<div class="col-md-3">
<div class="image">
<img id="10030" src="#">
</div>
</div>
<div class="col-md-3">
<div class="image">
<img id="10030" src="#">
</div>
</div>
<div class="col-md-3">
<div class="image">
<img id="10030" src="#">
</div>
</div>
<div class="col-md-3">
<div class="image">
<img id="10030" src="#">
</div>
</div>
</div>
There is more than 1 row on this page.
please help me to solve this.
the issue that you are having is because of your bootstrap grid.
I made an example below. Pay attention to: class="col-xs-6 col-md-3"
Here are the docs. https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-3" style="background-color:green;">1</div>
<div class="col-xs-6 col-md-3" style="background-color:blue;">2</div>
<div class="col-xs-6 col-md-3" style="background-color:red;">3</div>
<div class="col-xs-6 col-md-3" style="background-color:yellow;">4</div>
</div>
</div>
</body>
</html>
Hi i have used bootstrap carousel slider in my slider but the mobile responsiveness is not working .Here is my code:
<div class="mobileimage">
<div id="myCarousel" class="carousel slide mobilesss" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="<?php echo base_url();?>theme/slider/1a.jpg" class="img-responsive">
</div>
<div class="item">
<img src="<?php echo base_url();?>theme/slider/2a.jpg" class="img-responsive">
</div>
<div class="item">
<img src="<?php echo base_url();?>theme/slider/3a.jpg" class="img-responsive">
</div>
<div class="item">
<img src="<?php echo base_url();?>theme/slider/4a.jpg" class="img-responsive">
</div>
</div>
I have updated your fiddle, take a look
.carousel-inner>.item>img {
height: auto;
width: 100%;
margin: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="Container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="myCarousel" class="carousel slide mobilesss" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Los Angeles">
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
</div>
<div class="item">
<img src="ny.jpg" alt="New york">
</div>
</div>
</div>
</div>
Hello I am trying to get a hidden navigation to display as a user starts to scroll down the page. The navigation will not display as the user scrolls. I am not exactly sure why it will not work. I am pretty sure it has something to do with the JavaScript or HTML. If not I can post the CSS as well but for now this is what I have..
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="language" content="english">
<!-- Modernizr -->
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="js/vendor/modernizr.js"></script>
<!-- jQuery -->
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!-- Foundation -->
<link rel="stylesheet" href="css/foundation.css">
<!-- Alert box -->
<script type="text/javascript" src="js/alertbox.js"></script><!--http://www.w3schools.com/js/js_cookies.asp-->
<!-- News ticker -->
<link href="li-scroller.css" rel="stylesheet" type="text/css">
<script src="jquery.li-scroller.1.0.js"></script>
<!-- Site style -->
<link rel="stylesheet" href="css/SiteStyle.css" />
</head>
<!-- Cookie / Body container -->
<body onload="checkCookie()">
<nav id="fixedbar">
<ul id="fixednav">
<li>Men</li>
<li>Women</li>
<li>Kids</li>
</ul>
</nav>
<div class="large-1 columns void"> </div>
<div class="large-10 medium-12 small-12 columns siteContent">
<header>
<div class="large-12 medium-12 small-12 columns">
<div class="large-3 medium-3 small-12 columns">
<img src="img/logo.jpg" class="logo" alt="Main logo."/>
</div>
<div class="large-9 medium-9 small-12 columns userDash">
<div class="large-9 medium-8 small-12 columns userContainer">
<div id="userName">Sign In or Register
</div>
</div>
<div class="large-3 medium-4 small-12 columns cartContainer">
<img src="img/shoppingBag.svg" alt="Shopping bag icon" class="shoppingBagIcon"/><span> 0 </span><span class="shoppingBagText"> Items in your bag</span>
</div>
</div>
<div class="large-9 medium-9 small-12 columns tickerContainer">
<ul id="ticker01"><li><div>*** WELCOME TO NOVANI DESIGNS! **</div></li><li><div>* SIGN UP TODAY AND RECIEVE 25% OFF YOUR ENTIRE PURCHASE! **</div></li>
<li><div>* SPEND OVER $50 AND ENJOY FREE SHIPPING! ***</div></li></ul><script type="text/javaScript" src="js/newsscroll.js"></script>
</div>
<div class="large-12 medium-12 small-12 columns nav">
<div class="large-5 medium-5 small-12 columns">
<nav>
<ul class="mainNav">
<li>Men</li>
<li>Women</li>
<li>Kids</li>
</ul>
</nav>
</div>
<div class="large-5 medium-5 small-12 columns">
<input type="text" style="height:1.5em;"/>
</div>
</div>
</div>
</header>
<footer style="height:100em;">
1
</footer>
</div>
<div class="large-1 columns void"> </div>
<!-- jQuery -->
<script src="js/vendor/jquery.js"></script>
<!-- Foundation -->
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<!-- News ticker -->
<script>$(function(){$("ul#ticker01").liScroll();$("ul#ticker02").liScroll({travelocity: 0.15});});</script>
<script type="text/javascript">
$(document).ready(function(){
$('#fixedbar a').on('click', function(e) {
e.preventDefault();
});
$(window).on('scroll',function() {
var scrolltop = $(this).scrollTop();
if(scrolltop >= 215) {
$('#fixedbar').fadeIn(250);
}
else if(scrolltop <= 210) {
$('#fixedbar').fadeOut(250);
}
});
});
</script>
</body>
</html>
delete following lines
<nav id="fixedbar">
<ul id="fixednav">
<li>Men</li>
<li>Women</li>
<li>Kids</li>
</ul>
</nav>