複数設置してあるサムネイルスライダーがまとめて動いてしまう。

Question

前提・実現したいこと

wordpressのwebサイトにてカスタムフィールドとslickを使って複数のサムネイルスライダーを実装したい

発生している問題・エラーメッセージ

サムネイルをクリックして連動させることはできたがサムネイルを押すとサイト上にあるスライダーすべての画像が変わってしまう。

該当のソースコード

( function() {
    var app = {
        initAchievementSlider: function(){
            var carousel = jQuery('.achievement-slider-js');
              carousel.slick({
                dots: false,
                slidesToShow: 8,
                infinite: true,
                asNavFor: '.achievement__content .image',
                focusOnSelect: true,
              });
              jQuery('.achievement__content .image').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: false,
                fade: true,
                asNavFor: '.achievement-slider-js',
              });
        },
      }

    jQuery(document).ready( function() {
        app.initAchievementSlider();
    });
})();

試したこと

調べた結果、スライダーを each で回し、何番目のスライダーを操作しているかを明確に指定する必要があるとのことで記載してみましたが知識が乏しく期待する動きができませんでした。
ご指摘等あればご教授願いたいです。
よろしくお願いいたします。

Answer 1

asNavForで連動するスライダを一意に指定できるようにしなくちゃダメです
とりあえずeachで一つ一つslickして一つ一つ別々のasNavForを設定するというのは前提として

実はslickのasNavForの値は公式ではセレクタの文字列って書いてありますが
jQueryオブジェクトでもいけます

公式のドキュメントに書いてることじゃないのでその辺は留意

sample

Comments

[roto_note]

回答有り難うございます。
(function($) {
$(".achievement-slider-js").each(function() {
$(this).slick({
dots: false,
slidesToShow: 8,
infinite: true,
focusOnSelect: true,
asNavFor:'.achievement__content .image'
});
});

$(".achievement__content .image").each(function() {
$(this).slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.achievement-slider-js'
});
});
})(jQuery);

ご教授いただいた内容をもとにeachを書き加えて変更してみたのですがスライダーは以前と変わらず一緒に動いています。
asNavForの指定を別々にするというのがよくわからず苦戦しております。
どのような指定をすればいいのでしょうか？？
よろしくお願い致します。

[KazuhiroHatano]

最も良いのは各スライダに一意のIDを与えてそれぞれのasNavForをIDで指定することです

しかし、スライダに任意のIDやclassを与える術がなかったとしてもasNavForを
jQueryオブジェクトで指定するという方法がまだあります

連動すべき２つのスライダは兄弟要素であったり、共通の親を持っていたりしませんか？
jQeuryの.parent.,prev,siblingなどを使って連動すべきスライダだけを拾ってasNavForに指定しましょう

[roto_note]

丁寧にご回答ありがとうございます！
今回は別の方法で解決致しました！