Immagine problematica del carosello di avvolgimento

Question

La giostra non si avvolge bene.

Se continuo a fare clic a destra, l'ultima immagine mostrata sarà la prima. Quindi devo cliccare altre quattro volte, a quel punto questa immagine sarà alla sinistra del carosello. Nessuna immagine è mostrata sul lato destro. Poi all'improvviso appaiono tutti insieme. Questo succede quando la giostra ricomincia.

mi aspetto che il telaio "Transizione 2" sarebbe "Img # 2" sul lato destro, e così via.

Ho provato

• girando di partire o
• girando all'infinito di partire o
• giocherellare con l'impostazione slidesToShow, e l'aumento può contribuire a riproduzione automatica, ma dal momento che ho larghezza variabile immagini e un responsive design, questa impostazione mostrerà solo una piccola quantità di immagini su schermi più piccoli
• in ultima Chrome e FF

Sto utilizzando slick.js 1.5.8 con le seguenti impostazioni:

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

Con il seguente codice HTML (la giostra chiazza di petrolio è all'interno di un contenitore Bootstrap 3):

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

Io uso il inclusi file del tema CSS, ma hanno aggiunto il seguente

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

Answer 1

non ho dimestichezza con la giostra chiazza di petrolio, ma vorrei suggerire di rimuovere il maggior numero di incognite come possibile con la creazione di il carosello liscio senza alcun bootstrap o CSS personalizzato estraneo. Se trovi che il carousel funziona come previsto senza il bootstrap/css personalizzato, allora sai che alcuni CSS sono in conflitto con lo slick. In caso contrario, qualcosa deve essere sbagliato con la tua impostazione liscia.

Sono sicuro che hai guardato attraverso tutte le opzioni di configurazione chiazza di petrolio ha ... http://kenwheeler.github.io/slick/

Inoltre, sembra che chiazza di petrolio ha alcune grandi usi, ma ho avuto un sacco di successo con il carosello di bootstrap. Potrebbe valere la pena provare se la chiazza di petrolio non funziona.

Answer 2

slick ha un'impostazione slidesToShow che per impostazione predefinita 1. Si desidera modificare tale impostazione su "3". Controlla le "voci multiple" impostazione qui: http://kenwheeler.github.io/slick/ che ha questo codice:

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