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

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

しんぺー
そうですね、、slickのオプションを2行ほど変更しましょうか。
不具合のあるフォトギャラリー
ぜんぶ一緒に動く。。。
共通のコンポーネントとして使い回すにはどうすればよいか?
See the Pen 複数asnavforで不具合 by shimpei (@shimpei) on CodePen.
不具合を解消したフォトギャラリー
See the Pen 複数でasnavforする時 by shimpei (@shimpei) on CodePen.
これを、こう変更しました。

変更前の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(), // ...省略... }); }); });

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

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