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

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

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

しんぺー

そうですね、、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(),
      // ...省略...
    });
  });
});

これやったら、なんぼでもフォトギャラリー設置し放題やん。

最後に

今回は実際に自分が困った時に解決した方法を共有しました。
いろいろな解法があると思いますが、一つの方法としてあなたの役に立っていれば幸いです。

最後までありがとうございました!