"Thumbnail Carousel - Single image sliding"
Bootstrap 3.2.0 Snippet by pradeep330

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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"> <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a> <div class="text-center">1</div> </div> </div> <div class="item"> <div class="col-md-4"> <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a> <div class="text-center">2</div> </div> </div> <div class="item"> <div class="col-md-4"> <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a> <div class="text-center">3</div> </div> </div> <div class="item"> <div class="col-md-4"> <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a> <div class="text-center">4</div> </div> </div> <div class="item"> <div class="col-md-4"> <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a> <div class="text-center">5</div> </div> </div> <div class="item"> <div class="col-md-4"> <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a> <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>
.carousel-inner.onebyone-carosel { margin: auto; width: 90%; } .onebyone-carosel .active.left { left: -33.33%; } .onebyone-carosel .active.right { left: 33.33%; } .onebyone-carosel .next { left: 33.33%; } .onebyone-carosel .prev { left: -33.33%; }
$(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)); } }); });

Related: See More


Questions / Comments:

I got error like below:
Error: regulation-of-energy-intake:4398 Uncaught TypeError: jQuery(...).carousel is not a function
Error code: jQuery('#myCarousel').carousel({
interval: 10000
})
Pls help me to slove this

Geetha Lakshmi () - 6 years ago - Reply 0


there is an issue here.... if i have only 2 slides it shows the second slide two times

John Smith () - 6 years ago - Reply 0


Hi pradeep, i want to download this script.
can you please tel me how to download this sscript ????

gagan () - 6 years ago - Reply 0


Omar is not alone, this code doesn't actually work as provided

jarfer () - 6 years ago - Reply 0


It works perfectly in Internet Explorer, but not in the others... somebody knows why? Help me, please

Jaime () - 6 years ago - Reply 0


Hallo thx for upload!

ezio2907 () - 7 years ago - Reply 0


Hi mine just show one thumbnail per cycle? thanks

IVAN JORDAN () - 7 years ago - Reply 0


try this script if you wanna change how many box easily

$('.fdi-Carousel .item').each(function () {
var boxCount = 5; // change this to how many box you want
var next = $(this).next();
for(i = 1; i < boxCount; i++) {
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
next = next.next();
}
});

Don't forget to adjust box size

Munawwirul Jamal () - 7 years ago - Reply 0


@Munawwirul Jamal, i have a requirement i need to show 2 images per carousel slide and move those 2 images simultaneously. currently only 1 image per carousel is visible and only that is moving. How can i achieve the same for two.

pratika2395 () - 3 years ago - Reply 0


Hi! How do I change the gradient grey background to an image background? Can you have a video background?

Sara Closetotheearth () - 7 years ago - Reply 0


Hello, i have a problem when i see in responsive it shows multiple column i want see only one image slide how it is possible

Parmar Thakur () - 8 years ago - Reply 0


While Using this code, in chrome, it shows the whole boxes moving out in a single click, in Firefox is ok.
Also this page works well in in both browsers, only the code u provide makes the problem

Naseer Hussain () - 8 years ago - Reply 0


I must be missing something obvious. I cannot get only one item to cycle per change... It always cycles through everything... Im pretty sure i did everything exactly as you have

Omar () - 8 years ago - Reply 0


Hi Omar, and anyone else battling with this,

Check your version of Bootstrap, the latest version 3 uses 3dtransform if available, so whilst the script is fine, the css won't work. You'll need to change it to:

/** single-item multi carousel */
.carousel-inner.onebyone-carosel { margin: auto; width: 90%; }

@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner.onebyone-carosel > .item {
-webkit-transition: -webkit-transform .6s ease-in-out;
-o-transition: -o-transform .6s ease-in-out;
transition: transform .6s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
}

.carousel-inner.onebyone-carosel > .item.next,
.carousel-inner.onebyone-carosel > .item.active.right {
left: 0;
-webkit-transform: translate3d(33.33%, 0, 0);
transform: translate3d(33.33%, 0, 0);
}

.carousel-inner.onebyone-carosel > .item.prev,
.carousel-inner.onebyone-carosel > .item.active.left {
left: 0;
-webkit-transform: translate3d(-33.33%, 0, 0);
transform: translate3d(-33.33%, 0, 0);
}

.carousel-inner.onebyone-carosel > .item.next.left,
.carousel-inner.onebyone-carosel > .item.prev.right,
.carousel-inner.onebyone-carosel > .item.active {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

.carousel-inner.onebyone-carosel > .active,
.carousel-inner.onebyone-carosel > .next,
.carousel-inner.onebyone-carosel > .prev {
display: block;
}

.carousel-inner.onebyone-carosel > .active {
left: 0;
}

.carousel-inner.onebyone-carosel > .next,
.carousel-inner.onebyone-carosel > .prev {
position: absolute;
top: 0;
width: 100%;
}

.carousel-inner.onebyone-carosel > .next {
left: 33.33%;
}

.carousel-inner.onebyone-carosel > .prev {
left: -33.33%;
}

.carousel-inner.onebyone-carosel > .next.left,
.carousel-inner.onebyone-carosel > .prev.right {
left: 0;
}

.carousel-inner.onebyone-carosel > .active.left {
left: -33.33%;
}

.carousel-inner.onebyone-carosel > .active.right {
left: 33.33%;
}

Also, there is an additional wrapping div with the carousel class and is unnecessary:

<div id="myCarousel" class="carousel fdi-Carousel slide">

<div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">

Remove the one with the id="eventCarousel", and change the next and prev buttons to reference #myCarousel instead. Good luck.

Rory (galacticevil) () - 8 years ago - Reply 0


Thanks! It's working just fine!

RomanMorenets () - 8 years ago - Reply 0


That looks right... Have not tried yet though... Thanks!

Omar () - 8 years ago - Reply 0


You are most welcome, hopefully it does the trick for you. I've used it on a few projects with great results.

Rory (galacticevil) () - 8 years ago - Reply 0


The latest version of bootstrap 3 didn't help me. Your code was right, but it brackes the animation of slider in mobile grid. So your code should be with @media (min-width: 992px){.....} or something else to turn slides with no crashed animation. Anyway thanks!)

Sergey () - 8 years ago - Reply 0


<div class="col-md-4">
change this to.
<div class="col-md-3">

but add more div one colom.
<div class="col-md-3">
....
</div>

<div class="col-md-3">
....
</div>

<div class="col-md-3">
....
</div>

<div class="col-md-3">
....
</div>

Uchiha () - 8 years ago - Reply 0


i want to show 4 slides not three , any one can help :(

ibnfarouk () - 8 years ago - Reply 0


Have you got 4 slides??? If yes please help

Chakravarthy Karri () - 8 years ago - Reply 0


css:

.carousel-inner.onebyone-carosel { margin: auto; width: 100%; }
.onebyone-carosel .active.left { left: -25%; }
.onebyone-carosel .active.right { left: 25%; }
.onebyone-carosel .next { left: 25%; }
.onebyone-carosel .prev { left: -25%; }

js:

$('#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));
}
if (next.next().next().length > 0) {
next.next().next().children(':first-child').clone().appendTo($(this));
}
});

html:

<div class="item active">
<div class="col-md-4">

to:

<div class="item active">
<div class="col-md-3">

ykushev () - 8 years ago - Reply 0


else condition should be added one more time, like that:
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
if (next.next().next().length > 0) {
next.next().next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}

RomanMorenets () - 8 years ago - Reply 0


When it reaches end, the first box will appear following the last box, but then the next click wont show the second box. Any hint?

Munawwirul Jamal () - 7 years ago - Reply 0


in my not work, you have the code in git?

Dione Alves () - 8 years ago - Reply 0


how can i show only one slide..??

Lokesh Kumar Puranam () - 8 years ago - Reply 0


one slide - by default in bootstrap.

ykushev () - 8 years ago - Reply 0