Twitter Bootstrap - multiple image (thumbnail) carousel - moving thumbnails one at a time

Question

I am trying to download a Twitter 3 boot tracker. I am new to HTML, CSS and Javascript. I have a carousel that I created and it looks like this:

<div class="container"> <div id="myCarousel2" class="carousel slide"> <!-- Carousel items --> <div class="carousel-inner"> <div class="item active"> <div class="row text-center"> <!-- ITEM--> <div class="col-md-3"> <div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a> </div> </div> <!-- ITEM--> <!-- ITEM--> <div class="col-md-3"> <div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a> </div> </div> <!-- ITEM--> <!-- ITEM--> <div class="col-md-3"> <div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a> </div> </div> <!-- ITEM--> <!-- ITEM--> <div class="col-md-3"> <div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a> </div> </div> <!-- ITEM--> </div> </div> <div class="item"> <div class="row text-center"> <!-- ITEM--> <div class="col-md-3"> <div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a> </div> </div> <!-- ITEM--> <!-- ITEM--> <div class="col-md-3"> <div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a> </div> </div> <!-- ITEM--> <!-- ITEM--> <div class="col-md-3"> <div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a> </div> </div> <!-- ITEM--> <!-- ITEM--> <div class="col-md-3"> <div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a> </div> </div> <!-- ITEM--> </div> </div> </div> <!-- /INNER--> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel2" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> </div> </div> 

Now this means that 4 images are displayed simultaneously. The fact is that I have 8 images. In the carousel above it, 4 images are displayed at a time, and then proceeds to the next 4. Here's the Javascript:

 <script type="text/javascript"> $('.carousel.slide').carousel() </script> 

And CSS:

 @media (max-width: 767px){ .carousel .row .span3 { display: block; float: left; width: 25%; margin-left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } .carousel .carousel-control { visibility: hidden; } 

How to make images move only once in a continuous loop?

Answer 1

Take a look at this Bootply: http://bootply.com/94452

You can use jQuery to clone () elements accordingly.

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

Alternative: Multiple Bootstrap Carousel Frames