Twitter Bootstrap - mehrere Bild (thumbnail) Karussell - Miniaturbilder einzeln verschieben

Question

Ich probiere Twitter Bootstrap 3. Ich bin ziemlich neu in HTML, CSS und Javascript. Ich habe ein Karussell, die ich erstellt und es den Code sieht so aus:

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

nun dieser Satz zu einem Zeitpunkt 4 Bilder zu zeigen. Die Sache ist, ich habe 8 Bilder. In dem Karussell oben zeigt es vier Bilder gleichzeitig und gleitet dann auf den nächsten 4. Hier ist das Javascript:

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

Und die 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; } 

Wie bekomme ich die Bilder nur zu bewegen, Eins-zu-eins in einer kontinuierlichen Schleife?

Answer 1

in diesem Bootply Werfen Sie einen Blick: http://bootply.com/94452

Sie jQuery die Elemente klonen können entsprechend() ..

$('.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 Option: Bootstrap carousel multiple frames at once