0

反応スリックを実装しました。slickGoTo と slidesToScroll を配置すると問題が発生します。最初にページがロードされると、slickGoTo が 4 番目に呼び出されます。完了すると、slidesToScroll の制御が失われ、最後の項目が表示されなくなります。

   <div style="background: red; padding: 40px; margin: 0;"> <div 
class="firstDiv">
    <div><h1 style="font-size: 5em; margin: 0;">E</h1>
        Yay, this is a caption. Look, we're on the fifth picture!<br>But we can't scroll to the first picture in the thumbnails anymore :(</div>
</div>
<div class="thumbnails">
   <div><h1>A</h1></div>
    <div><h1>B</h1></div>
    <div><h1>C</h1></div>
    <div><h1>D</h1></div>
    <div><h1>E</h1></div>
    <div><h1>F</h1></div>
    <div><h1>G</h1></div>
    <div><h1>H</h1></div>
    <div><h1>I</h1></div>
    <div><h1>J</h1></div>
    <div><h1>K</h1></div>
    <div><h1>L am before last</h1></div>
    <div><h1>am last</h1></div>
</div>
enter code here


$('.thumbnails').slick({
slidesToShow: 5,
slidesToScroll: 5,
centerMode: false,
infinite: false
});
$('.thumbnails').slickGoTo(4);

http://jsfiddle.net/svx2dzwL/

私はstackoverflowで同じ質問をしていますが、役に立ちません。 カルーセルを壊す Slick Slider slickGoTo メソッド

4

1 に答える 1

0

問題は、設定したオプションの一部が互いに競合していることです。現在、そこに 13 のアイテムがありますslidesToScroll:5。

したがって、設定slickGoTo(4)すると項目 5 に移動し、4 つの項目が後ろにあり、4 つの項目が前にあるため、前後に移動しようとすると、slidesToSroll: 5.

この問題を解決するには、 を許可するinfinite scrollingか、 を下げslidesToScrollてslickGoTo

于 2018-02-27T15:06:35.747 に答える