Bootstrap su Twitter - immagine multipla (miniatura) carosello - sposta le miniature una alla volta

Question

Sto provando Twitter bootstrap 3. Sono abbastanza nuovo per HTML, CSS e Javascript. Ho una giostra che ho creato e del codice è in questo modo:

<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> 

Ora, questo è impostato per visualizzare 4 immagini alla volta. Il fatto è che ho 8 immagini. Nella giostra di sopra di essa mostra 4 immagini alla volta e poi scivola al successivo 4. Ecco il Javascript:

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

E il 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; } 

Come faccio ad avere le immagini di muoversi solo uno alla volta in un ciclo continuo?

Answer 1

Date un'occhiata a questo Bootply: http://bootply.com/94452

È possibile utilizzare jQuery per clonare() le voci di conseguenza ..

$('.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)); 
    } 
}); 

Opzione alternativa: Bootstrap carousel multiple frames at once