Bootstrap carousel and showing multiple items

Question

I'm using @paulalexandru( https://stackoverflow.com/users/3522687/paulalexandru ) solution to showing multiple items on a bootstrap slider. Unfortunately I'm not advanced enough with javascript to be able to show 4 items(or more or less) instead of the current 3. Can someone break the following code down maybe so I can understand where to even begin to understand what tells the script to only show 3 at a time? Here's a functioning JS fiddle of Paul's work. http://fiddle.jshell.net/paulalexandru/at606jpe/light/

I understand the CSS just fine but I know the carousel doesn't solely rely on the CSS for displaying here. I'm trying to make it show x items based on screen size

Answer 1

I changed all the:

• 33% to 25% .
• col-md-4 to col-md-3

And here's the result:

 $('#myCarousel').carousel({ interval: 10000 }) $('.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)); } }); 

 .carousel-inner .active.left { left: -25%; } .carousel-inner .active.right { left: 25%; } .carousel-inner .next { left: 25% } .carousel-inner .prev { left: -25% } .carousel-control.left { background-image: none; } .carousel-control.right { background-image: none; } .carousel-inner .item { background: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/bbbbbb/fff&amp;text=1" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/CCCCCC&amp;text=2" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=5" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a></div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> 

Fiddle: http://fiddle.jshell.net/at606jpe/685/