Bootstrap carousel with multiple items

Question

I'm working on a project available on JSFiddle . As you can notice, there are 6 items displayed and I would like to make a carousel to display 3 items per slide. After researching this issue, I find this awesome project on Codepen . Each item of my project is represented by the following code:

 <div class="wrapper"> <img src="https://photos-2.dropbox.com/t/2/AACS3GcxUnMu4DpsfC5pF-zF55I8WHf1blL4AvkQULu1Gw/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHsgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" /> <div class="overlay"> <h2 class="header">A Movie in the Park: Kung Fu Panda</h2> </div> </div>

while the item on Codepen is represented by this one:

 <div class="item active"> <div class="col-xs-4"> <a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a> </div> </div>

Whenever I try to remove the item's code in Codepen and place my item's code from JSFiddle, the slider stops working.

Please let me know how to solve this problem.

Answer 1

Is this what you wanted? Please check fiddle, you will understand, why it wasn't working. You may have missed some libraries and CSS.

 $('#theCarousel').carousel({ interval: false }) $('.multi-item-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)); } });

 .multi-item-carousel{ .carousel-inner{ > .item{ transition: .6s ease-in-out all; } .active{ &.left{ left:-33%; } &.right{ left:33%; } } .next{ left: 33%; } .prev{ left: -33%; } } .carouse-control{ &.left, &.right{ background-image: none; } } @media all and (transform-3d), (-webkit-transform-3d) { &{ .carousel-inner { > .item{ transition: .6s ease-in-out all; -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-perspective: none; -webkit-transform: none!important; transform: none!important; } } } } }

 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <div class="container"> <div class="col-md-8 col-md-offset-2"> <div class="carousel slide multi-item-carousel" id="theCarousel"> <div class="carousel-inner"> <div class="item active"> <div class="col-xs-4 wrapper"> <a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a> </div> </div> <div class="item"> <div class="col-xs-4"> <a href="#1"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></a> <div class="overlay"> <h5 class="header">A Movie in the Park: Kung Fu Panda</h5> </div> </div> </div> <div class="item"> <div class="col-xs-4"> <a href="#1"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></a> <h5 class="header">Batman Return</h5> </div> </div> <div class="item"> <div class="col-xs-4"> <a href="#1"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></a> <h5 class="header">Deadpool</h5> </div> </div> <div class="item"> <div class="col-xs-4"> <a href="#1"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></a> </div> </div> <div class="item"> <div class="col-xs-4"> <a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a> </div> </div> </div> <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> </div> </div> </div>

Answer 2

Read the carousel documentation and notice the format of each item (specifically the addition of .item and .active ).

This wrapper around each image is making it so that 3 elements are displayed per row:

<div class="col-xs-4">
    ...
</div>

(in comparison, using .col-xs-12 would indicate 1 image per displayed row, and .col-xs-6 would indicate 2 images per displayed row)