Bootstrap 3 carousel with multiple items

Question

I have implemented a multiple item carousel using Bootstrap3 as shown in this demo. It displays 4 items at a time.

How can I change that? I'd like to show 5 or 6 items at a time.

Answer 1

Simply by changing the limit on the for call

for (var i=0;i<4;i++) {
    next=next.next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }

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

Now has six.

Of course you'll want to keep the columns in order by changing col-md-3 to col-md-2

Answer 2

Multiple changes are needed:

In JS change i<2 to i<3 (will display 5 across) or i<4 (will display 6 across)

In HTML change your <div class="col-md-6 col-md-offset-3"> to something that will accomodate more cells, for example <div class="col-md-10 col-md-offset-1">. (This is optional, but 6 across in a col-md-6 looks pretty tight in my opinion)

Change col-md-3 to col-md-2. Note that this will change the carousel only on medium and large resolution screens. To adjust the width on sm and xs you would need to adjust the col sizes for col-sm and col-xs

Then in your CSS change to accodomate for 6 across in the animation by changing 25% (100%/4) to 16.7% (100%/6). If you want 5 across, you would change this to 20%.

@media (min-width: 992px ) {
    .carousel-inner .active.left { left: -16.7%; }
    .carousel-inner .next        { left:  16.7%; }
    .carousel-inner .prev        { left: -16.7%; }  
}

Updated Bootply with 6 across