Bootstrap multi item carousel moving at one item,
I copied code from this link, now i am trying to implement this in my local environment(localhost) with same effect but it is coming different ? can you please help
Added Link of CSS and JS
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
CSS
.carousel-inner .active.left { left: -33%; }
.carousel-inner .active.right { left: 33%; }
.carousel-inner .next { left: 33% }
.carousel-inner .prev { left: -33% }
.carousel-control.left { background-image: none; }
.carousel-control.right { background-image: none; }
.carousel-inner .item { background: white; }
HTML
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><img src="http://placehold.it/500/bbbbbb/fff&text=1" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/500/CCCCCC&text=2" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/500/fcfcfc/333&text=5" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Jquery
$('#myCarousel').carousel({
interval: 10000
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
I don't know JSFiddle that well, but I've tried to copy and paste the fiddle in my own starters template and it works fine. I guess you didn't include jquery or something like that. My code should work, except you have to check if you have the css, jquery, javascript an glyphicons included. So my advice is to download a bootstrap starting folder (https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip) and paste the code in a index.html file..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Bootstrap starters template</title>
<!-- Bootstrap Core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet">
<style>
.carousel-inner .active.left { left: -33%; }
.carousel-inner .active.right { left: 33%; }
.carousel-inner .next { left: 33% }
.carousel-inner .prev { left: -33% }
.carousel-control.left { background-image: none; }
.carousel-control.right { background-image: none; }
.carousel-inner .item { background: white; }
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><img src="http://placehold.it/500/bbbbbb/fff&text=1" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/500/CCCCCC&text=2" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/500/fcfcfc/333&text=5" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('#myCarousel').carousel({
interval: 10000
});
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
</script>
</body>
</html>
Related
I use a working picture slider with jQuery UI. I can change the pictures with the slider. Now, I like to change the pictures automatic additionally in a period (for example 3 seconds).
$(function() {
var myImages = [
"img/january/tweet_january_1.svg",
"img/january/tweet_january_2.svg",
"img/january/tweet_january_3.svg",
"img/january/tweet_january_4.svg",
"img/january/tweet_january_5.svg"
];
$("#start_slider").slider({
min: 0,
max: (myImages.length - 1),
step: 1,
change: function(event, ui) {
$('#flask1').attr('src', myImages[ui.value]);
}
});
});
.start_heading {
padding: 2em;
margin-top: 10em;
text-align: center;
font-family: 'Roboto';
font-size: 1em;
}
#start_slider {
align-content: center;
margin-left: 15em;
margin-right: 15em;
margin-top: 3em;
margin-bottom: -10em;
}
<div class="start_heading">
<h2> Headline</h2>
</div>
<div class="tweets_january">
<img src="img/january/tweet_january_1.svg" height="" width="" id="flask1" />
<div id="start_slider"></div>
</div>
You can use any JQuery plugin for Carousel from here and can also do following
<!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>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beautiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beautiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
I want to slide my image to left when click on the right arrow of the image slider. I cant apply the slide left animation.When click right arrow current image hide and next image is showing but not slide animation is happening
$('#image-content img:first').addClass('active');
//ON CLICK ON RIGHT ARROW DISPLAY NEXT
currentIndex = $('#image-content img').index(this) + 1;
$('.right-arrow').on('click', function() {
if($('#image-content img.active').index() < ($('#image-content img').length - 1)){
currentIndex++;
$('#image-content img.active').animate({width: 'toggle'}).removeClass('active').next('#image-content img').addClass('active');
}
else {
currentIndex = 1;
$("#image-content img").removeClass("active");
$('#image-content img').eq(currentIndex - 1).addClass('active');
}
});
//ON CLICK LEFT ARROW DISPLAY PREVIOUS IMAGE
$('.left-arrow').on('click', function() {
if ($('#image-content img.active').index() > 0) {
currentIndex--;
$('#image-content img.active').removeClass('active').prev('#image-content img').addClass('active');
} else {
currentIndex = $('#image-content img').length;
$("#image-content img").removeClass("active");
$('#image-content img').eq(currentIndex - 1).addClass('active')
}
});
#image-content{
height: 400px;
width: 100%;
}
#image-content img{
position: absolute;
height: auto;
width: auto;
max-height: 380px;
max-width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: none
}
#image-content img.active{
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-1 text-right nav-direction">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/136304-200.png" class="img-fluid left-arrow" alt="">
</div>
<div class="col-9 text-center">
<!-- Main Images -->
<div id="image-content">
<!--(start foreach)-->
<img src="http://letssunday.com/assets/upload/product/5aa63613ea17a107011.jpg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dc88ad258479.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97d45e75220450.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dcf94f110046.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97e6268c505542.jpeg" class="img-fluid">
<!-- (end foreach)-->
</div>
<!-- End main Images-->
</div>
<div class="col-1 text-left nav-direction">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png" class="img-fluid right-arrow" alt="">
</div>
</div>
I just want to slide it to left side.Currently working fine except animation.Help Please
There's another way for it. Use bootstrap:
div#myCarousel, div#myCarousel > div.carousel-inner, div#myCarousel > div.carousel-inner > div.item{
/* selector to edit divs */
}
div#myCarousel > div.carousel-inner > div.item > img{
/* selector to edit images */
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!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">
<h2>Carousel Example</h2>
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive col-xs-12" src="http://letssunday.com/assets/upload/productImageGallary/5a5da97d45e75220450.jpeg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img class="img-responsive col-xs-12" src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dcf94f110046.jpeg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img class="img-responsive col-xs-12" src="http://letssunday.com/assets/upload/productImageGallary/5a5da97e6268c505542.jpeg" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
it's working like a charm
css seems to work, i think there's an issue on youor js.
$('#image-content img:first').addClass('active');
//ON CLICK ON RIGHT ARROW DISPLAY NEXT
currentIndex = $('#image-content img').index(this) + 1;
$('.right-arrow').on('click', function() {
if($('#image-content img.active').index() < ($('#image-content img').length - 1)){
currentIndex++;
$('#image-content img.active').animate({width: 'toggle'}).removeClass('active').next('#image-content img').addClass('active');
}
else {
currentIndex = 1;
$("#image-content img").removeClass("active");
$('#image-content img').eq(currentIndex - 1).addClass('active');
}
});
//ON CLICK LEFT ARROW DISPLAY PREVIOUS IMAGE
$('.left-arrow').on('click', function() {
if ($('#image-content img.active').index() > 0) {
currentIndex--;
$('#image-content img.active').removeClass('active').prev('#image-content img').addClass('active');
} else {
currentIndex = $('#image-content img').length;
$("#image-content img").removeClass("active");
$('#image-content img').eq(currentIndex - 1).addClass('active')
}
});
#image-content{
height: 400px;
width: 100%;
}
#image-content img{
position: absolute;
height: auto;
width: auto;
max-height: 380px;
max-width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: none;
transition: 1s;
}
#image-content img.active{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-1 text-right nav-direction">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/136304-200.png" class="img-fluid left-arrow" alt="">
</div>
<div class="col-9 text-center">
<!-- Main Images -->
<div id="image-content">
<!--(start foreach)-->
<img src="http://letssunday.com/assets/upload/product/5aa63613ea17a107011.jpg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dc88ad258479.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97d45e75220450.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dcf94f110046.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97e6268c505542.jpeg" class="img-fluid">
<!-- (end foreach)-->
</div>
<!-- End main Images-->
</div>
<div class="col-1 text-left nav-direction">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png" class="img-fluid right-arrow" alt="">
</div>
</div>
The best option to slide is moving content from out of page to in and the opposite for sliding-out object.
Hi I'm working on bootstrap carousal. I tried to show the multiple slide one by one on the arrow click. I have used some code and Somewhat it is working but not expected. I wanted to move only one image on click. But, here the whole image slide is moving. Please help me to move only one image on click. Thanks in advance.
$('#Carousel').carousel({
interval: 4000
})
$('#Carousel .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < 2; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
.dashboard-menu-wrapper {
display: none
}
.carousel-inner .active.left {
left: -10%;
}
.carousel-inner .next {
left: 10%;
}
.carousel-inner .prev {
left: -10%;
}
.carousel-control {
width: 4%;
}
.carousel-control.left,
.carousel-control.right {
background-image: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col-md-12">
<div class="carousel slide" id="Carousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3">
<img src="http://placehold.it/500/e499e4/fff&text=1" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="http://placehold.it/500/e477e4/fff&text=2" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="http://placehold.it/500/f566f5/333&text=5" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="http://placehold.it/500/fcfcfc/333&text=8" class="img-responsive">
</div>
</div>
</div>
<a class="left carousel-control" href="#Carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#Carousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
To achieve the desired result you can use a different carousel. I`ve been trying a lot do the same with bootstrap but could not achieve the result.
The OWL Carousel https://owlcarousel2.github.io work really easy with aligned elements...
See demo: https://owlcarousel2.github.io/OwlCarousel2/demos/basic.html
try this.
$('#Carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
-> https://codepen.io/Not2Day2Die/pen/ddPbpE
Hope this help you
I'm using a Bootstrap carousel to display images and their respective captions. The image can be portrait, landscape.
I'm able to correctly display landscape images in the carousel with their caption below. In case of Portrait images I'm trying to align the centre image to the right so that it does not overlap with the caption. I changed the CSS property in file bootstrap.min.css but it's not working.
CSS code...
.carousel-inner {
position: relative;
align: right;
width: 100%;
overflow: hidden;
Any idea how to align Portrait image to the right without affecting the other 2 images?
The obj parameter is contains the image src, caption details. The values are being returned by an ajax function being called to the back-end service.
HTML Code..
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<div id="carouselObject">
<div id="carousel-example-generic" class="carousel slide" data-pause="true" data-interval="5000000"> <!--data-interval= 5000 seconds-->
<div class="carousel-inner" role="listbox" id="carouselinner">
</div>
<a class="left carousel-control" href="#/carousel-example-generic" role="button"> <!--data-slide="prev"-->
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" onclick="loadPrevSlide()" id="leftcarouselbutton"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#/carousel-example-generic" role="button"> <!--data-slide="next"-->
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" onclick="loadNextSlide()" id="rightcarouselbutton"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
i have created code pen for similar carousel slider. have a look at once it may helpful for you.
<head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="carosel-example">
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1" class=""></li>
<li data-target="#carousel-example-captions" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="900x500" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg">
<div class="carousel-caption">
<h3>First slide </h3>
<p> ContentContentContentContentContentContent</p>
</div>
</div>
<div class="item">
<img alt="900x500" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg">
<div class="carousel-caption">
<h3>Second slide</h3>
<p>Content</p>
</div>
</div>
<div class="item">
<img src="http://a.static.trunity.net/files/299501_299600/299598/vertical-farming-chris-jacobs.jpg">
<div class="carousel-caption">
<h3>Third slide</h3>
<p>Content</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
///// CSS code goes here
.carousel-caption {
color: #000;
}.carosel-example, .new-caption-area {
width: 600px;
margin: auto;
color: #000;
}
////////////// JS CODE
jQuery(function ($) {
$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('.new-caption-area').html(caption.html());
caption.css('display', 'none');
$(".carousel").on('slide.bs.carousel', function (evt) {
var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index() + 1) + ') .carousel-caption');
$('.new-caption-area').html(caption.html());
caption.css('display', 'none');
});
});
http://codepen.io/srinivasr/pen/EPdxKG
The below code is sliding one thumbnail at a time. I want to slide 3 at time. Can someone please help. Thanks!
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
The trick is to use bootstrap class "row".
jQuery
$('#myCarousel').carousel({
interval: 10000
})
html
<div class="col-md-7">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-4">
<img src="http://placehold.it/500/bbbbbb/fff&text=1" class="img-responsive">
</div>
<div class="col-md-4">
<img src="http://placehold.it/500/CCCCCC&text=2" class="img-responsive">
</div>
<div class="col-md-4">
<img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-4">
<img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive">
</div>
<div class="col-md-4">
<img src="http://placehold.it/500/fcfcfc/333&text=5" class="img-responsive">
</div>
<div class="col-md-4">
<img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive">
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
css
.carousel-inner .active.left { left: -33%; }
.carousel-inner .next { left: 33%; }
.carousel-inner .prev { left: -33%; }
.carousel-control.left,.carousel-control.right {background-image:none; color: black;}
Hope it helps!