12

画像のギャラリーもあるニュース記事ページに取り組んでいます。ギャラリーのサムネイルには滑らかなスライダーを使用しています。ギャラリー内のすべての画像には、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が苦手だからかもしれません。

4

4 に答える 4

11

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

以下の例を参照してください

http://jsfiddle.net/9fnmegqb/

そしてバージョン 1.4+ の時点で:$('.firstDiv').slick('slickGoTo', 4)

于 2014-10-20T15:34:37.890 に答える
5

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

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

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

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

于 2016-05-06T14:48:53.903 に答える
2

私が見つけた解決策は、無限を真に変更することです

$('.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 年前のものであることはわかっていますが、回避策を投稿する必要がありました。

于 2017-09-07T09:43:04.247 に答える