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

<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)); } });

Similar snippets: See More


Comments:

David Brooks 2014-11-19 13:56:54
    This is a great snippet but does anyone know how to convert it to 6 columns instead of 3?
maxsurguy 2014-11-19 17:57:33
    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!
Adam Looze 2015-01-31 04:59:32
    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.
Bhavin Desai 2015-02-12 18:23:20
    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.
Puelles 2014-11-21 13:01:58
    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
sello 2014-11-30 10:14:04
    how do i display four images rather than 3?
maxsurguy 2014-12-01 00:58:56
    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!
sello 2014-12-01 14:11:38
    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
Adam Looze 2015-01-31 04:55:25
    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.
rol drouaillet pumarino 2016-09-27 23:31:19
    easy way:
Ducati 2014-12-18 04:32:17
    I recreated this slider, and when the previous control was clicked the transition wasn't as smooth as the example.
Nitesh 2015-01-08 14:39:00
    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.
Dusklaws 2015-04-29 12:08:17
    Similar problem here found any solution?
Jovanni Basilisco 2015-05-19 10:03:47
    Just place the script at the bottom before the closing body tag. Works for me :)
David 2015-05-28 16:58:39
    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.
Joãø Paulø 2015-02-02 18:20:17
    It's possible show 4 itens!?
maxsurguy 2015-02-02 18:45:49
    yes, replace col-lg-4 (4 columns) with col-lg-3 (3 columns) class
Joãø Paulø 2015-02-03 14:46:41
    Thank you!
Umair Razzaq 2015-02-05 16:05:15
    I did but it still showing 3, also I've multiple carousels in same page.
maxsurguy 2015-02-07 03:37:43
    Ah, I think you also have to replace 33% with 25% in CSS.
ibnfarouk 2015-04-17 13:24:54
    i did replace percentage and still same problem :(
schel4ok 2015-02-08 08:49:14
    I am using your beautiful snippet. But have one strange trouble.
Pravindra 2017-01-06 05:54:20
    same problem for me also..
Please give some solution..!!
Jose Antonio Atencio Jimenez 2015-03-07 23:30:08
    amazing job, is there a posibility to zoom the active image?
Julian 2015-04-16 19:33:13
    $('#myCarousel').carousel({
M 2015-06-09 19:28:48
    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?
Péter Váradi 2015-06-11 10:09:10
    If you want to more than 3 column, you should use the script under:
Mehul Bawadia 2015-06-11 13:31:03
    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...
isan 2015-07-27 16:41:59
    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??
Naseer Hussain 2015-08-14 07:06:05
    it shows multiple rows instead of one, how can I fix this?
Sanjoy Kanrar 2015-08-19 17:49:33
    for small I want to display 2 images and for big screen want three images for displaying,what should I do???
onigetoc 2016-01-14 17:21:39
    Great but should show only one image on mobile
raghibsuleman 2016-05-17 05:21:52
    You can visit here : https://codepen.io/mephysto...
vasantha m chavadi 2017-05-25 06:31:47
    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????

Commenting will be back soon.