Wie kann ich mein Multi-Item Bootstrap Karussell Cloning stoppen?

Question

Ich bin immer noch ziemlich neu im Webdesign - Ich habe es mir selbst beigebracht und generell in der Lage, Lösungen für alle Probleme online zu finden, aber ich bin auf etwas gestoßen, das ich noch nicht genug Wissen zu beheben habe und kann keine zufriedenstellende Antwort finden.

Ich versuche, eine Looping-Multi-Element-Karussell mit Bootstrap, zu erstellen und den Code geändert habe ich here 6 Bilder statt 4.

Die html Ich verwende zu zeigen, zu finden ist mehr oder weniger genau wie im obigen Link (Ich habe gerade die Spaltengrößen für die einzelnen Bilder auf col-md-2 col-sm-6 col-xs-12 geändert). Ich fand ein paar ähnlichen Fragen online und durch diese folgende habe ich die JS zu dieser Änderung:

$('#myCarousel').carousel({ 
interval: 40000 
}); 

// ARCHIVE CAROUSEL 

$('.carousel[data-type="multi"] .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<4;i++) { 
    next=next.next(); 
    if (!next.length) { 
     next = $(this).siblings(':first'); 
    } 

    next.children(':first-child').clone().appendTo($(this)); 
    } 
}); 

und die CSS zu diesem (für die Desktop-Ansicht):

.carousel-inner .active.left { left: -16.7%; } 
.carousel-inner .next  { left: 16.7%; } 
.carousel-inner .prev  { left: -16.7%; } 


.carousel-inner > .item.next, 
.carousel-inner > .item.active.right { 
    left: 0; 
    -webkit-transform: translate3d(16.7%, 0, 0); 
    -ms-transform: translate3d(16.7%, 0, 0); 
    -o-transform: translate3d(16.7%, 0, 0); 
    transform: translate3d(16.7%, 0, 0); 
} 

.carousel-inner > .item.prev, 
.carousel-inner > .item.active.left { 
    left: 0; 
    -webkit-transform: translate3d(-16.7%, 0, 0); 
    -ms-transform: translate3d(-16.7%, 0, 0); 
    -o-transform: translate3d(-16.7%, 0, 0); 
    transform: translate3d(-16.7%, 0, 0); 
} 

Das Karussell ist Arbeiten in meinem Browser Vorschau genau so, wie ich es will - mit einem Problem. Das ganze Karussell klont sich 4 Mal auf der Seite.

Ich bin mir bewusst, da dies neu für mich ist, dass es wahrscheinlich etwas sehr offensichtlich und dumm ist, aber ich würde gerne verstehen, wo ich hier falsch gelaufen bin, wenn mir jemand helfen kann?

Vielen Dank im Voraus!

Bootply Vorschau here (Ich versuche nur wirklich die Desktop-Ansicht richtig für jetzt zu bekommen)

[für Rechtschreibung/Interpunktion bearbeitet]

Answer 1

Änderungslinie in JS:

for (var i=0;i<6;i++) { 

6 statt 4.

Answer 2

Es ist wirklich sehr nett, dass Sie darüber nachdenken, Leistung zu kopieren, sogar Sie sind ziemlich neu zu w eb design. Ich empfehle Ihnen, ein Array zu erstellen, bevor Sie das Karussell definieren. Array enthält alle Ihre Dias jQuery Objekte:

var slides = [$('.slide-1'), $('.slide-2')];

Füllen Sie es mit dynamischen Elementen, oder einfach nur bestehende Selektoren definieren. Es wird Ihnen ermöglichen, RE-USE jQuery-Objekt statt neu zu erstellen. Sie können vorhandene Blöcke beliebig hinzufügen.

Ein weiterer Punkt hier - Sie sollten Grenze von Elementen in Karussell definieren oder ungesehen Dias von ihm bei jeder Iteration usw. entfernen Es wird Ihnen viel Speicher speichern (auch wenn Sie wiederverwenden bereits Gegenstand bestehender aufgrund anhängen, wird Ihr Container erweitert).

Hoffe diese Hilfe.

Answer 3

am Beispiel der Suche, die Schleife Elemente an das Karussell sollte bei 4 zweimal for (var i=0;i<2;i++) {

Sie setzen Ihre einzige anhängen laufen.

ändern 4-2