Twitter Bootstrap – carrousel d'image multiple (miniature) – déplacer les vignettes une à la fois

J'essaie Twitter bootstrap 3. Je suis tout à fait nouveau en HTML, CSS et Javascript. J'ai un carrousel que j'ai créé et son code ressemble ainsi:

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

Maintenant, cela permet de montrer 4 images à la fois. La chose est que j'ai 8 images. Dans le carrousel ci-dessus, il affiche 4 images à la fois, puis glisse vers le prochain 4. Voici le Javascript:

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

Et le 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; } 

Comment puis-je obtenir que les images ne se déplacent que d'un seul à la fois dans une boucle continue?

• CSS: survoler sur un appareil mobile ou autre comme bascule
• En-tête autocollant CSS / JS
• Comment créer des cercles autour d'un cercle avec css, javascript?
• Initialement cacher un div pour affichage ultérieur
• JQuery autocomplete en arrière-plan de la zone de texte d'entrée

• Défilement vertical multi-colonne dans CSS / JavaScript
• Sélectionnez la case troncant le texte lorsque la taille de la police du corps a changé via javascript sur le document prêt dans IE 9
• Effet de réflexion d'image utilisant un CSS pur
• TypeError: $ (…) .DataTable n'est pas une fonction
• Overflow-x: visible; Ne fonctionne pas avec overflow-y: auto; Une solution de contournement?

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