web-dev-qa-db-ja.com

カルーセルを壊すスリックスライダーslickGoToメソッド

画像ギャラリーもあるニュース記事ページを作成しています。ギャラリーのサムネイルに slick slider を使用しています。ギャラリーのすべての画像には、our-url.com/category/articlewithgallery/1、2、3などのように、広告表示の目的で独自のURLがあります（ニースではありませんが、私には何もできません）。

私はこのようなレスポンシブなブレークポイントを使用しています：

$('.gallery-thumbs').slick({
  slidesToShow: 5, slidesToScroll: 5, dots: false, infinite: false, speed: 300,
  responsive: [ { breakpoint: 1024, settings: { slidesToShow: 5, slidesToScroll: 5 } },
  { breakpoint: 600, settings: { slidesToShow: 4, slidesToScroll: 4 } },
  { breakpoint: 438, settings: { slidesToShow: 3, slidesToScroll: 3 } },
  { breakpoint: 270, settings: { slidesToShow: 2, slidesToScroll: 2 } } ]
} );

これは正常に機能しています。しかし、URLがたくさんあるので、サムネイルを現在読み込まれている画像から始めたいと思います。これを追加することでこれを達成できます：

$('.gallery-thumbs').slickGoTo(parseInt(cur_pic));

サムネイルは正しい位置から始まりますが、カルーセルを壊します。たとえば、もう後方にスクロールすることはできません。ドラッグすると、その方向にさらにサムネイルがあることがわかりますが、（新しい）開始位置に跳ね返ります。また、最後の「スライド」を表示している場合は、スライドがまったく表示されないか、すべてのサムネイルの後に空白が追加されます。

私は、スリックスライダーの「onInit」機能を使用していないためか、初期化などの前にこのスライドに移動するように指示しているので、それがめちゃくちゃだと思ったのかもしれません。私はあらゆる種類のものを試しましたが、onInit：function（）のものを機能させることができませんでした。

私はJavaScriptがかなり苦手だからかもしれません。

javascriptjqueryslick.js
10
jimihenrik

それは働いています。コード：$('.firstDiv').slickGoTo(4);

以下の例をご覧ください

http://jsfiddle.net/9fnmegqb/

そして、バージョン1.4+以降：$('.firstDiv').slick('slickGoTo', 4)

10
Praveen G

バージョン1.4以降、アクションを呼び出すメソッドが変更されました。

slickGoTo()関数の同等のコード行は$('#slider_selector_id').slick('slickGoTo', slide_number);です。

（どこ #slick_selector_idはスライダーのIDであり、slide_numberは必要なスライドインデックスの整数です）

（ 別の回答はこちら に応じて Alexandre Bourlier が提案したコメントからの回答）==）

5
Simon Shirley

私が機能していることがわかった解決策は、無限をtrueに変更することです

$('.gallery-thumbs').slick({
  slidesToShow: 5, slidesToScroll: 5, dots: false, infinite: true, speed: 300, responsive: 
  [ 
    { breakpoint: 1024, settings: { slidesToShow: 5, slidesToScroll: 5 } },
    { breakpoint: 600, settings: { slidesToShow: 4, slidesToScroll: 4 } },
    { breakpoint: 438, settings: { slidesToShow: 3, slidesToScroll: 3 } },
    { breakpoint: 270, settings: { slidesToShow: 2, slidesToScroll: 2 } } 
  ] 
});

投稿が3歳であることは知っていますが、回避策のソリューションを投稿する必要がありました。

2
gmetax