"Infinite carousel (loop) multi-Item"
Bootstrap 3.2.0 Snippet by sdcarte

<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="col-md-12"> <div class="carousel slide" id="myCarousel"> <div class="carousel-inner"> <div class="item active"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a></div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a></div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">3</a></div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">4</a></div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">5</a></div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">6</a></div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">7</a></div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">8</a></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> </div>
.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;} .item:not(.prev) {visibility: visible;} .item.right:not(.prev) {visibility: hidden;} .rightest{ visibility: visible;}
$('#myCarousel').carousel({ interval: 40000 }); $('.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)).addClass('rightest'); } else { $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); } });

Related: See More


Questions / Comments:

You can visit here : https://codepen.io/mephysto...

raghibsuleman (0) - 2 years ago - Reply 0


The code is working fine. but my requirement is : i want to show 4 images at a time instead of 3 images.
for this requirement where i need to change in code????

vasantha m chavadi (0) - 1 year ago - Reply 0


Great but should show only one image on mobile

onigetoc (0) - 2 years ago - Reply 0


for small I want to display 2 images and for big screen want three images for displaying,what should I do???

Sanjoy Kanrar (0) - 2 years ago - Reply 0


it shows multiple rows instead of one, how can I fix this?

Naseer Hussain (0) - 2 years ago - Reply 0


hi,i used this code but i have problem with it! Every time I refresh my pages change pictures used in this Code! and Every time I refresh my pages shows 3 different pictures!!! how can Resolve this problem??

isan (0) - 2 years ago - Reply 0


I am trying to make this dynamic ? But I am failing to do so. Here's the question I have asked on stackoverflow: http://stackoverflow.com/qu...

Mehul Bawadia (0) - 3 years ago - Reply 0


If you want to more than 3 column, you should use the script under:

<script>
$(document).ready(function() {
console.log($(document).width()/100);
var countTo = $(document).width()/100;
if (countTo > 10) {
countTo = 5;
}
else {
countTo = 3;
}
$('.carousel .item').each(function(){
for (var i = 0; i < countTo; i++) {
next = $(this).next();
next.appendTo($(this));
}
});
});
</script>

In mobile devices / tablets in horizontal mode shows you four column, but in desktop is shows six!

Péter Váradi (0) - 3 years ago - Reply 0


$('#myCarousel').carousel({

interval: 40000

});

var slides_count = $('.carousel .item').length;

$('.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<slides_count -="" 2;i++)="" {="" next="next.next();" if="" (!next.length)="" {="" next="$(this).siblings(':first');" }="" next.children(':first-child').clone().appendto($(this));="" }="" });="">

Julian (0) - 3 years ago - Reply 0


Julian - How does this snippet ^ work? Mine comes out with one frame at a time, and the other two are blank....full update of your code if you have it?

M (0) - 3 years ago - Reply 0


amazing job, is there a posibility to zoom the active image?

Jose Antonio Atencio Jimenez (0) - 3 years ago - Reply 0


I am using your beautiful snippet. But have one strange trouble.

Instead of scrolling images one by one (like on this page) it looks like 3 images scrolling together. But after scrolling I see that images still shifted only per one step.

Then I checked page ouput and see that I have following:

<div class="item">

<div class="col-lg-4 col-xs-4 col-md-4 col-sm-4">

<img src="/img/clients/primefitness.png" alt="Сеть фитнес клубов Праймфитнесс" title="Сеть фитнес клубов Праймфитнесс" class="img-responsive"></div>

<div class="col-lg-4 col-xs-4 col-md-4 col-sm-4">

<img src="/img/clients/pride-wellness-club.png" alt="Фитнес клуб Pride wellness club" title="Фитнес клуб Pride wellness club" class="img-responsive"></div><div class="col-lg-4 col-xs-4 col-md-4 col-sm-4 rightest">

<img src="/img/clients/novye-veshki.png" alt="Коттеджный поселок Новые Вешки" title="Коттеджный поселок Новые Вешки" class="img-responsive"></div></div>

So in each item block there are 3 pictures and they scroll together. Then pictures in next item block changes by one step. So it works a little bit different from your initial code

Though in page code I wrote everything just like you.

<div class="item">

<div class="col-lg-4 col-xs-4 col-md-4 col-sm-4">

<img src="/img/clients/primefitness.png" alt="Сеть фитнес клубов Праймфитнесс" title="Сеть фитнес клубов Праймфитнесс" class="img-responsive"></div>

</div>

schel4ok (0) - 3 years ago - Reply 0


same problem for me also..
Please give some solution..!!

Pravindra (0) - 1 year ago - Reply 0


It's possible show 4 itens!?

Joãø Paulø (0) - 3 years ago - Reply 0


yes, replace col-lg-4 (4 columns) with col-lg-3 (3 columns) class

maxsurguy (0) - 3 years ago - Reply 0


I did but it still showing 3, also I've multiple carousels in same page.

Umair Razzaq (0) - 3 years ago - Reply 0


Ah, I think you also have to replace 33% with 25% in CSS.

maxsurguy (0) - 3 years ago - Reply 0


i did replace percentage and still same problem :(

and is it possible to show only one slide in xs screes ??

ibnfarouk (0) - 3 years ago - Reply 0


Thank you!

Joãø Paulø (0) - 3 years ago - Reply 0


I am using the same code but instead of displaying 3 image it is displaying only one image. Tell me what i am doing wrong. I just copy paste that code.

Nitesh (0) - 3 years ago - Reply 0


Similar problem here found any solution?

Dusklaws (0) - 3 years ago - Reply 0


Hey. I got the same problem and found a solution. You are probably using newer version of a bootstrap as i was. I changed it on 3.2.0 and it works fine.

David (0) - 3 years ago - Reply 0


Just place the script at the bottom before the closing body tag. Works for me :)

Jovanni Basilisco (0) - 3 years ago - Reply 0


I recreated this slider, and when the previous control was clicked the transition wasn't as smooth as the example.

Ducati (0) - 3 years ago - Reply 0


how do i display four images rather than 3?

sello (0) - 3 years ago - Reply 0


easy way:

add:
if (next.next().length>0) {

next.next().children(':first-child').clone().appendTo($(this)).addClass('rightest');
next.next().next().children(':first-child').clone().appendTo($(this));
}

not forget change all col-xx-4 styles to col-xx-3 and in the CSS:
.carousel-inner .active.left { left: -25%; }
.carousel-inner .next { left: 25%; }
.carousel-inner .prev { left: -25%; }

rol drouaillet pumarino (0) - 1 year ago - Reply 0


I believe you would change all col-xx-4 styles to col-xx-3. By xx I mean md, xs, lg and sm. Give it a shot!

maxsurguy (0) - 3 years ago - Reply 0


i tried that before , it makes the images to that size but still displays 3 columns with one empty column and not four with images in them, how do i add the fourth column image

sello (0) - 3 years ago - Reply 0


Check the css. There are styles set to percent. 33% to be exact. Which is one third. Which would imply 3 images. I dont think 4 would be a good idea because you always need 1 image in the center, so an odd number would be sufficient. 20% would be in fifths. odd number = 1 in center.

Adam Looze (0) - 3 years ago - Reply 0


How to differentiate between a header Carousel With One item / slide and other like this in JS and CSS? For example: #headerCarousel and #myCarousel . THX

Puelles (0) - 3 years ago - Reply 0


This is a great snippet but does anyone know how to convert it to 6 columns instead of 3?

David Brooks (0) - 3 years ago - Reply 0


I believe you can just reduce the col-lg-4 col-xs-4 col-md-4 col-sm-4 sizes to -2 instead of -4 and you'll be good to go!

maxsurguy (0) - 3 years ago - Reply 0


it's not working for me after changing CSS(20% for five items) and HTML(col-xx-2 for support 5 item). i seen that the class "rightest" is also append to next 3rd item only. can you look at that.

Bhavin Desai (0) - 3 years ago - Reply 0


Also change the CSS, Check the 33% styles. 33% is one third, which is 3 images. And you want an odd number so one will be in the center. 5 images or 7.

Adam Looze (0) - 3 years ago - Reply 0