Problemloses Bildkarussell Wrap-around

Question

Das Karussell wickelt sich nicht gut um.

Wenn ich weiterhin rechts klicke, wird das letzte Bild, das angezeigt wird, das allererste sein. Dann muss ich vier weitere Male klicken, wobei sich dieses Bild ganz links vom Karussell befindet. Keine Bilder werden auf der rechten Seite angezeigt. Dann erscheinen sie plötzlich alle gleichzeitig. Dies geschieht, wenn das Karussell von vorne beginnt.

Ich würde erwarten, dass der "Transition 2" Rahmen "Img # 2" auf der rechten Seite haben würde, und so weiter.

Ich habe

versucht

• runter drehen Einstellung ein- oder ausgeschaltet
• drehen Unendlich-Einstellung ein- oder ausgeschaltet
• mit der Einstellung slidesToShow Hantieren und Erhöhung der ihm helfen kann, aber da ich mit variabler Breite Bilder und eine ansprechende Design, werden diese Einstellung zeigen, nur eine kleine Menge von Bildern auf kleineren Bildschirmen
• es in neuestem Chrome und FF

Ich verwende slick.js 1.5.8 mit den folgenden Einstellungen:

$("#myslick").slick({ 
    autoplay: true, 
    variableWidth: true 
    }); 

Mit dem folgenden HTML (das Slick-Karussell ist innerhalb eines Bootstrap 3 Container):

<div class="container"> 
    <div id="myslick"> 
     a few <img> tags with variable dimensions 
    </div> 
</div> 

ich verwende CSS Theme-Dateien enthalten, aber haben die folgende

.slick-slide { 
    height: 100px; 
    margin: 0 15px; 
} 

Answer 1

ich bin nicht vertraut mit dem glatten Karussell hinzugefügt, aber ich würde vorschlagen, wie viele Unbekannte wie möglich zu entfernen, indem das Slick-Karussell ohne Bootstrap oder überflüssige benutzerdefinierte CSS beteiligt. Wenn Sie feststellen, dass das Karussell wie vorgesehen ohne Bootstrap/css funktioniert, dann wissen Sie, dass CSS mit slick kollidiert. Ansonsten muss etwas mit deiner glatten Einrichtung nicht stimmen.

Ich bin sicher, Sie haben alle Konfigurationsoptionen sah durch Slick hat ... http://kenwheeler.github.io/slick/

Auch scheint es, wie glatt einige große Anwendungen hat, aber ich habe viel Erfolg hatte mit der Bootstrap Karussell. Könnte einen Versuch wert sein, wenn Slick nicht funktioniert.

Answer 2

slick hat eine slidesToShow Einstellung, die standardmäßig auf 1 eingestellt ist. Sie möchten diese Einstellung auf "3" ändern. Schauen Sie sich die „mehrere Items“ Einstellung hier: http://kenwheeler.github.io/slick/, die diesen Code hat:

$('.multiple-items').slick({ 
infinite: true,  // Keep on looping 
slidesToShow: 3, // Number of slides to show at one time 
slidesToScroll: 3 // Number of slides to scroll per click 
});