【2行で解決】slickのasNavForで複数のフォトギャラリーを設置すると、全部動いてしまう

投稿日 1月 28, 2023
更新日 1月 26, 2024
著者しんぺー
カテゴリー Code
カテゴリー jQuery

複数のフォトギャラリーを設置した時に、全部のスライドが動いてしまう

フォトギャラリー複数設置したら、全部のスライド干渉してる。
次のスライドへ送ると全部のスライドが一斉に動いてしまう。。。
これ作り直しかな？

しんぺー

そうですね、、slickのオプションを2行ほど変更しましょうか。

不具合のあるフォトギャラリー

ぜんぶ一緒に動く。。。

共通のコンポーネントとして使い回すにはどうすればよいか？

See the Pen 複数asnavforで不具合 by shimpei (@shimpei) on CodePen.

不具合を解消したフォトギャラリー

See the Pen 複数でasnavforする時 by shimpei (@shimpei) on CodePen.

これを、こう変更しました。

asNavFor: '.photo-thumb',をasNavFor: $(this).next(),に、
asNavFor: '.photo-main',をasNavFor: $(this).prev(),に変更します。
コード全体は下記です。

変更前のslickオプション

$(function () {
  $('.photo-main').each(function () {
    $(this).slick({
      // ...省略...
      asNavFor: '.photo-thumb',
      // ...省略...
    });
  });
  $('.photo-thumb').each(function () {
    $(this).slick({
      // ...省略...
      asNavFor: '.photo-main',
      // ...省略...
    });
  });
});

変更後のslickオプション

$(function () {
  $('.photo-main').each(function () {
    $(this).slick({
      // ...省略...
      asNavFor: $(this).next(),
      // ...省略...
    });
  });
  $('.photo-thumb').each(function () {
    $(this).slick({
      // ...省略...
      asNavFor: $(this).prev(),
      // ...省略...
    });
  });
});