サムネイルを固定したslickスライダーを同じページに複数設置したい

前提・実現したいこと

下記サイトを参考に、サムネイルは固定で全部表示されるスライダーを作成中です。
同じページに複数のスライダーを設置したいのですが、うまくいきません。

参考サイト：slick.jsでサムネイル付きスライダーを作成する｜takblog

1つ目のスライダーはうまく動きますが、
2つ目以降のスライダーは1つ目と連動してしまったり、
.gallery_phに入ってくるはずの画像が消えてしまったりします。

スライダーの設定が同じidやclassだからだと思っています。
ただ仕様の都合上、html上は同じclassのままにしたいため、
javascriptのほうで連番をつけるなどの作業が必要だと考えています。

インクリメント演算子？などで各スライドのidなどを個別にしようとしたのですが
力不足で正常に動作するまでには至りませんでした。

該当ソースコード（一部抜粋）

html
1<div class="gallery_wrap">
2　<ul class="gallery_ph">
3　　<li class="slide-item"><img data-lazy="common/images/img_prod01.jpg" alt="画像"></li>
4　　<li class="slide-item"><img data-lazy="common/images/img_prod02.jpg" alt="画像"></li>
5　　<li class="slide-item"><img data-lazy="common/images/img_prod03.jpg" alt="画像"></li>
6　　<li class="slide-item"><img data-lazy="common/images/img_prod04.jpg" alt="画像"></li>
7　　<li class="slide-item"><img data-lazy="common/images/img_prod05.jpg" alt="画像"></li>
8　　<li class="slide-item"><img data-lazy="common/images/img_prod06.jpg" alt="画像"></li>
9　　<li class="slide-item"><img data-lazy="common/images/img_prod01.jpg" alt="画像"></li>
10　　<li class="slide-item"><img data-lazy="common/images/img_prod02.jpg" alt="画像"></li>
11　</ul>
12　<ul class="gallery_thumb">
13　　<li class="thumbnail-item thumbnail-current"><img src="common/images/img_prod01.jpg" alt="画像"></li>
14　　<li class="thumbnail-item"><img src="common/images/img_prod02.jpg" alt="画像"></li>
15　　<li class="thumbnail-item"><img src="common/images/img_prod03.jpg" alt="画像"></li>
16　　<li class="thumbnail-item"><img src="common/images/img_prod04.jpg" alt="画像"></li>
17　　<li class="thumbnail-item"><img src="common/images/img_prod05.jpg" alt="画像"></li>
18　　<li class="thumbnail-item"><img src="common/images/img_prod06.jpg" alt="画像"></li>
19　　<li class="thumbnail-item"><img src="common/images/img_prod01.jpg" alt="画像"></li>
20　　<li class="thumbnail-item"><img src="common/images/img_prod02.jpg" alt="画像"></li>
21　</ul>
22</div>
23・
24・
25・
26同じコードが続きます
27・
28・
29・
30<div class="gallery_wrap">
31　<ul class="gallery_ph">
32　　<li class="slide-item"><img data-lazy="common/images/img_prod05.jpg" alt="画像"></li>
33　　<li class="slide-item"><img data-lazy="common/images/img_prod02.jpg" alt="画像"></li>
34　　<li class="slide-item"><img data-lazy="common/images/img_prod03.jpg" alt="画像"></li>
35　　<li class="slide-item"><img data-lazy="common/images/img_prod04.jpg" alt="画像"></li>
36　　<li class="slide-item"><img data-lazy="common/images/img_prod05.jpg" alt="画像"></li>
37　　<li class="slide-item"><img data-lazy="common/images/img_prod06.jpg" alt="画像"></li>
38　　<li class="slide-item"><img data-lazy="common/images/img_prod01.jpg" alt="画像"></li>
39　　<li class="slide-item"><img data-lazy="common/images/img_prod02.jpg" alt="画像"></li>
40　</ul>
41　<ul class="gallery_thumb">
42　　<li class="thumbnail-item thumbnail-current"><img src="common/images/img_prod05.jpg" alt="画像"></li>
43　　<li class="thumbnail-item"><img src="common/images/img_prod02.jpg" alt="画像"></li>
44　　<li class="thumbnail-item"><img src="common/images/img_prod03.jpg" alt="画像"></li>
45　　<li class="thumbnail-item"><img src="common/images/img_prod04.jpg" alt="画像"></li>
46　　<li class="thumbnail-item"><img src="common/images/img_prod05.jpg" alt="画像"></li>
47　　<li class="thumbnail-item"><img src="common/images/img_prod06.jpg" alt="画像"></li>
48　　<li class="thumbnail-item"><img src="common/images/img_prod01.jpg" alt="画像"></li>
49　　<li class="thumbnail-item"><img src="common/images/img_prod02.jpg" alt="画像"></li>
50　</ul>
51</div>

js
1	$(document).ready(function(){
2		var slider = ".gallery_ph"; // スライダー
3		var thumbnailItem = ".thumbnail-item"; // サムネイル画像アイテム
4
5		// サムネイル画像アイテムに data-index でindex番号を付与
6		$(thumbnailItem).each(function(){
7			var index = $(thumbnailItem).index(this);
8			$(this).attr("data-index",index);
9		});
10
11		// スライダー初期化後、カレントのサムネイル画像にクラス「thumbnail-current」を付ける
12		// 「slickスライダー作成」の前にこの記述は書いてください。
13		$(slider).on('init',function(slick){
14			var index = $(".slide-item.slick-slide.slick-current").attr("data-slick-index");
15			$(thumbnailItem+'[data-index="'+index+'"]').addClass("thumbnail-current");
16		});
17
18		//slickスライダー初期化  
19		$(slider).slick({
20			autoplay: false,
21			arrows: true,
22			fade: true,
23			infinite: true //これはつけましょう。
24		});
25		//サムネイル画像アイテムをクリックしたときにスライダー切り替え
26		$(thumbnailItem).on('click',function(){
27			var index = $(this).attr("data-index");
28			$(slider).slick("slickGoTo",index,false);
29		});
30
31		//サムネイル画像のカレントを切り替え
32		$(slider).on('beforeChange',function(event,slick, currentSlide,nextSlide){
33			$(thumbnailItem).each(function(){
34				$(this).removeClass("thumbnail-current");
35			});
36			$(thumbnailItem+'[data-index="'+nextSlide+'"]').addClass("thumbnail-current");
37		});
38	});

補足情報

jQeryのバージョン：3.4.0
slick：http://kenwheeler.github.io/slick/
jsの参考サイト：https://takblog.site/web/?p=144

足りない情報があればお知らせくださいませ。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

こんばんは。
eachメソッドとコンテキストを使ってはいかがでしょうか？

js
1$(document).ready(function(){
2    $('.gallery_wrap').each(function(i,e){
3        var slider = ".gallery_ph"; // スライダー
4        var thumbnailItem = ".thumbnail-item"; // サムネイル画像アイテム
5            // サムネイル画像アイテムに data-index でindex番号を付与
6        $(thumbnailItem, e).each(function(){
7            var index = $(thumbnailItem, e).index(this);
8            $(this).attr("data-index",index);
9        });
10
11        // スライダー初期化後、カレントのサムネイル画像にクラス「thumbnail-current」を付ける
12        // 「slickスライダー作成」の前にこの記述は書いてください。
13        $(slider, e).on('init',function(slick){
14            var index = $(".slide-item.slick-slide.slick-current", e).attr("data-slick-index");
15            $(thumbnailItem+'[data-index="'+index+'"]', e).addClass("thumbnail-current");
16        });
17
18        //slickスライダー初期化  
19        $(slider, e).slick({
20            autoplay: false,
21            arrows: true,
22            fade: true,
23            infinite: true //これはつけましょう。
24        });
25        //サムネイル画像アイテムをクリックしたときにスライダー切り替え
26        $(thumbnailItem, e).on('click',function(){
27            var index = $(this).attr("data-index");
28            $(slider, e).slick("slickGoTo",index,false);
29        });
30
31        //サムネイル画像のカレントを切り替え
32        $(slider, e).on('beforeChange',function(event,slick, currentSlide,nextSlide){
33            $(thumbnailItem, e).each(function(){
34                $(this).removeClass("thumbnail-current");
35            });
36            $(thumbnailItem+'[data-index="'+nextSlide+'"]', e).addClass("thumbnail-current");
37        });
38
39    })
40});