How to make 3 images slide at a time?

How to make 3 images slide at a time? - javascript

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!

Related

Bootstrap carousal - Issues when showing multiple slide one by one

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

stop autoslide from boostrap carousel with thumbnails

I am trying to stop autoslide from the bootstrap carousel corresponding to this jsfiddle example.
Whereas
$('.carousel').carousel({
interval: false
});
stops the main carousel, I dident find the way to stop the autosliding from the thumbnail part.
$(document).ready(function() {
var totalItems = $('#carousel .item').length;
var thumbs = 3;
var currentThumbs = 0;
var to = 0;
var thumbActive = 1;
function toggleThumbActive (i) {
$('#carousel-thumbs .item>div').removeClass('active');
$('#carousel-thumbs .item.active>div:nth-child(' + i +')').addClass('active');
}
$('#carousel').on('slide.bs.carousel', function(e) {
//var active = $(e.target).find('.carousel-inner > .item.active');
//var from = active.index();
var from = $('#carousel .item.active').index()+1;
var next = $(e.relatedTarget);
to = next.index()+1;
var nextThumbs = Math.ceil(to/thumbs) - 1;
if (nextThumbs != currentThumbs) {
$('#carousel-thumbs').carousel(nextThumbs);
currentThumbs = nextThumbs;
}
thumbActive = +to-(currentThumbs*thumbs);
//console.log(from + ' => ' + to + ' / ' + currentThumbs);
});
$('#carousel').on('slid.bs.carousel', function(e) {
toggleThumbActive(thumbActive);
});
$('#carousel-thumbs').on('slid.bs.carousel', function(e) {
toggleThumbActive(thumbActive);
});
$("#carousel").on("swiperight",function(){
$('#carousel').carousel('prev');
});
$("#carousel").on("swipeleft",function(){
$('#carousel').carousel('next');
});
$("#carousel-thumbs").on("swiperight",function(){
$('#carousel-thumbs').carousel('prev');
});
$("#carousel-thumbs").on("swipeleft",function(){
$('#carousel-thumbs').carousel('next');
});
});
$('.carousel').carousel({
interval: false
});
#carousel,
#carousel-thumbs {
max-width: 800px;
margin: 15px auto;
}
#carousel-thumbs .item img {
opacity: 0.5;
}
#carousel-thumbs .item.active div.active img {
opacity: 1;
border: 2px solid #000;
}
#carousel-thumbs .item.active div:not(.active) img {
cursor:pointer;
}
#carousel-thumbs .carousel-control {
background-image: none;
}
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">1</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">2</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">3</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">4</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">5</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">6</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">7</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">8</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">9</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control hiden-xs" href="#carousel" 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 hiden-xs" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="carousel-thumbs" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-xs-4 active"onclick="$('#carousel').carousel(0);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4"onclick="$('#carousel').carousel(1);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4"onclick="$('#carousel').carousel(2);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4"onclick="$('#carousel').carousel(3);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(4);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4" onclick="$('#carousel').carousel(6);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(7);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(8);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control hidden-xs" href="#carousel-thumbs" 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 hidden-xs" href="#carousel-thumbs" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

Get rid of data-ride="carousel", give your .carousel data-interval="false" attribute.
Quoting W3S
The data-ride="carousel" attribute tells Bootstrap to begin animating
the carousel immediately when the page loads.
If you want it to stop animating, remove .slide class from your your .carousel selector.
The .slide class adds a CSS transition and animation effect, which
makes the items slide when showing a new item. Omit this class if you
do not want this effect.
$(document).ready(function() {
var totalItems = $('#carousel .item').length;
var thumbs = 3;
var currentThumbs = 0;
var to = 0;
var thumbActive = 1;
function toggleThumbActive (i) {
$('#carousel-thumbs .item>div').removeClass('active');
$('#carousel-thumbs .item.active>div:nth-child(' + i +')').addClass('active');
}
$('#carousel').on('slide.bs.carousel', function(e) {
//var active = $(e.target).find('.carousel-inner > .item.active');
//var from = active.index();
var from = $('#carousel .item.active').index()+1;
var next = $(e.relatedTarget);
to = next.index()+1;
var nextThumbs = Math.ceil(to/thumbs) - 1;
if (nextThumbs != currentThumbs) {
$('#carousel-thumbs').carousel(nextThumbs);
currentThumbs = nextThumbs;
}
thumbActive = +to-(currentThumbs*thumbs);
//console.log(from + ' => ' + to + ' / ' + currentThumbs);
});
$('#carousel').on('slid.bs.carousel', function(e) {
toggleThumbActive(thumbActive);
});
$('#carousel-thumbs').on('slid.bs.carousel', function(e) {
toggleThumbActive(thumbActive);
});
$("#carousel").on("swiperight",function(){
$('#carousel').carousel('prev');
});
$("#carousel").on("swipeleft",function(){
$('#carousel').carousel('next');
});
$("#carousel-thumbs").on("swiperight",function(){
$('#carousel-thumbs').carousel('prev');
});
$("#carousel-thumbs").on("swipeleft",function(){
$('#carousel-thumbs').carousel('next');
});
});
$('.carousel').carousel({
interval: false
});
#carousel,
#carousel-thumbs {
max-width: 800px;
margin: 15px auto;
}
#carousel-thumbs .item img {
opacity: 0.5;
}
#carousel-thumbs .item.active div.active img {
opacity: 1;
border: 2px solid #000;
}
#carousel-thumbs .item.active div:not(.active) img {
cursor:pointer;
}
#carousel-thumbs .carousel-control {
background-image: none;
}
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel" class="carousel" data-interval="false" >
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">1</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">2</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">3</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">4</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">5</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">6</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">7</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">8</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">9</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control hiden-xs" href="#carousel" 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 hiden-xs" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="carousel-thumbs" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-xs-4 active"onclick="$('#carousel').carousel(0);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4"onclick="$('#carousel').carousel(1);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4"onclick="$('#carousel').carousel(2);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4"onclick="$('#carousel').carousel(3);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(4);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4" onclick="$('#carousel').carousel(6);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(7);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(8);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control hidden-xs" href="#carousel-thumbs" 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 hidden-xs" href="#carousel-thumbs" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

How can I make my image carousel responsive to display 1 image on mobile size?

Currently the Carousel shows 3 images, which is great until mobile which I would like to display a single image which can be navigated through, can anybody edit my code or push me in the right direction to discover how it can be achieved
Here is the html:
<div class="container-fluid imageCarousel">
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="container carousel fdi-Carousel slide">
<!-- Carousel items -->
<div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
<div class="carousel-inner onebyone-carosel">
<div class="item active">
<div class="col-md-4">
<img src="img/home-image1.png" class="img-responsive center-block">
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="img/home-image2.png" class="img-responsive center-block">
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="img/home-image3.png" class="img-responsive center-block">
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="img/home-image4.png" class="img-responsive center-block">
</div>
</div>
</div>
<a class="left carousel-control" href="#eventCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#eventCarousel" data-slide="next">›</a>
</div>
<!--/carousel-inner-->
</div><!--/myCarousel-->
</div>
</div>
</div>
and here is the current JS:
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 10000
})
$('.fdi-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));
}
});
});

try setting the col values for all window sizes. An example would be col-sm-12 col-xs-12 for small windowed devices and col-md-12 col-lg-12 for larger windowed devices

Bootstrap 3.3 Carousel - 3 images slide one by one

I want to show 3 thumbnails and onClick of arrow, it has to scroll only one at a time... When it comes to version 3.3, it is scrolling 3 thumbnails at a time... (but it is showing exactly what I want after that.). How can I fix this.
<div class="container">
<div class="row">
<div class="span12">
<div class="well">
<div id="myCarousel" class="carousel fdi-Carousel slide">
<!-- Carousel items -->
<div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
<div class="carousel-inner onebyone-carosel">
<div class="item active">
<div class="col-md-4">
<img src="http://placehold.it/250x250" class="img-responsive center-block">
<div class="text-center">1</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="http://placehold.it/250x250" class="img-responsive center-block">
<div class="text-center">2</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="http://placehold.it/250x250" class="img-responsive center-block">
<div class="text-center">3</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="http://placehold.it/250x250" class="img-responsive center-block">
<div class="text-center">4</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="http://placehold.it/250x250" class="img-responsive center-block">
<div class="text-center">5</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="http://placehold.it/250x250" class="img-responsive center-block">
<div class="text-center">6</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#eventCarousel" data-slide="prev"></a>
<a class="right carousel-control" href="#eventCarousel" data-slide="next"></a>
</div>
<!--/carousel-inner-->
</div><!--/myCarousel-->
</div><!--/well-->
</div>
</div>
</div>
En de javascript:
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 10000
})
$('.fdi-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));
}
});
});
JSFiddle: http://jsfiddle.net/Luuw070f/

Here a workaround with the transform property
http://jsfiddle.net/rewobs/Luuw070f/4/

Lightbox+bootstrap gallery, thumbnails

i need to a solution.
Now i have product with main image and some other photos under it.
If photos are more than 3, i need to show them like carousel, not like no in rows by 3.
Attaching img, to explain it more.
*4th,5th etc photo should be hidden in carousel.
*All images should popup if they are clicked.

You can possibly do it with Bootstrap but you need to do a bit of workaround since it is not available out of the box.
Suppose this is your HTML :
<div class="col-md-7">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-4"><img src="http://placehold.it/500/bbbbbb/fff&text=1" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4"><img src="http://placehold.it/500/CCCCCC&text=2" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4"><img src="http://placehold.it/500/fcfcfc/333&text=5" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive"></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>
Workaround JavaScript :
$('#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));
}
});
Working demo here : http://jsfiddle.net/6ouybst4/
Now help yourself and implement lightbox in it :-)

Develop Reference

JavaScript is the programming language of the Web.

How to make 3 images slide at a time? - javascript

Related

Bootstrap carousal - Issues when showing multiple slide one by one

stop autoslide from boostrap carousel with thumbnails

How can I make my image carousel responsive to display 1 image on mobile size?

Bootstrap 3.3 Carousel - 3 images slide one by one

Lightbox+bootstrap gallery, thumbnails

Categories

Resources