slick slider サムネイル固定連動を複数設置したい。

前提・実現したいこと

slick slider サムネイル固定連動をページ内に複数設置したく
以下サイトを参考に「サムネイル連動させない固定型」で複数設置したところ
うまく動かなく、どのようにしたら良いか分からず・・。ご教授いただけましたらと思います。

https://www.nowte.net/article/1330/#wrapper

該当のソースコード

参考元javaScript

$(function() {  
  $slide = $('.slide');
  $navigation = $('.slide-navigation .item');
 
  $slide.slick({  //slickスライダー作成
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
  });  
  $navigation.each(function(index){ //サムネイルに連番付与属性
    $(this).attr('data-number', index);
  });
  $navigation.eq(0).addClass('current');  //1枚をオーバーレイ
  
  $navigation.on('click', function(){ //サムネイルクリック時イベント
    var number = $(this).attr('data-number');
    $slide.slick('slickGoTo', number, true);
    $(this).siblings().removeClass('current');
    $(this).addClass('current');
  });
});

参考元html
<ul class="slide">
  <li class="item"><img src="https://picsum.photos/id/301/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/305/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/307/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/308/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/310/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/315/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/318/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/320/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/321/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/331/1024/768" alt="" /></li>
</ul>
<ul class="slide-navigation">
  <li class="item"><img src="https://picsum.photos/id/301/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/305/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/307/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/308/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/310/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/315/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/318/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/320/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/321/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/331/1024/768" alt="" /></li>
</ul>







### 試したこと
**試したこと**
javascript
$slide = $('.slide');
$navigation = $('.slide-navigation .item');
上記部分を複製

$slide = $('.slide1');
$navigation = $('.slide-navigation1 .item');

$slide = $('.slide2');
$navigation = $('.slide-navigation2 .item');


html
classをそれぞれ追加変更

<div class="slide">
<div class="item"> <img src=""/> </div>
<div class="item"> <img src=""/> </div>
</div>
<div class="slide-navigation">
<div class="item"> <img src=""/> </div>
<div class="item"> <img src=""/> </div>
</div>


<div class="slide1">
<div class="item"> <img src=""/> </div>
<div class="item"> <img src=""/> </div>
</div>
<div class="slide-navigation1">
<div class="item"> <img src=""/> </div>
<div class="item"> <img src=""/> </div>
</div>


<div class="slide2">
<div class="item"> <img src=""/> </div>
<div class="item"> <img src=""/> </div>
</div>
<div class="slide-navigation2">
<div class="item"> <img src=""/> </div>
<div class="item"> <img src=""/> </div>
</div>

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

回答2件

自己解決

ご協力ありがとうございました。
力技という感じですが、以下太字部分を変更、複製で動作確認ができました。

$(function() {
$slide1 = $('.slide1');
$navigation1 = $('.slide-navigation1 .item');

$slide1.slick({ //slickスライダー作成
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
});
$navigation1.each(function(index){ //サムネイルに連番付与属性
$(this).attr('data-number', index);
});
$navigation1.eq(0).addClass('current'); //1枚をオーバーレイ

$navigation1.on('click', function(){ //サムネイルクリック時イベント
var number = $(this).attr('data-number');
$slide1.slick('slickGoTo', number, true);
$(this).siblings().removeClass('current');
$(this).addClass('current');
});
});

投稿2021/11/03 20:57

編集2021/11/03 20:58

masakaito

総合スコア0

試していませんが、.slide と .slide-navigation をラッパー要素で包んで、ラッパー要素をeachで回すのがよさそうに思います。

html
1<div class="wrapper">
2    <ul class="slide">
3    </ul>
4    <ul class="slide-navigation">
5    </ul>
6</div>

js
1$(function() {  
2  $('.wrapper').each(function(){
3    const $slide = $('.slide', this);
4    const $navigation = $('.slide-navigation .item', this);
5    //...