slickスライダーで連動するサムネイル画像を表示する2つの方法

MW WP Form(WordPress)でデイトピッカーが動かないときの対処法

2022.01.17

WordPressの自動更新を止める方法を紹介

2022.01.19

VScode 便利なショートカット 文末を選択

2022.01.19

スライダー下にスライダーのサムネイル画像が並んでいるページを見たことがありますよね。

サイトのトップページなどのメインビジュアルにスライダーがあることが多く、大抵その時のお得な情報や特集が載っていたりするので、個人的にもネットショッピングのサイトでキャンペーンの情報やはないかなと無意識にチェックしたりしている気がします。

そのとき、バナーのように一覧で見れるのは便利ですよね。

また、自動再生で流れていってしまった情報（スライド）を見返したいときも、サムネイルがあるとサッと戻って見ることができます。

今回は、そんなサムネイル画像をslickスライダーで表示する方法です。
slickスライダーではオプションで様々な指定をできますがそれを使用します。

以下二通りあるのですが、使用するオプションによって少し挙動が違っていて、メインスライドでアクティブなスライドとサムネイル側でもそれを連動させてスタイルを変えるのにハマってしまったので、自分の忘備録でもあります。

方法① asNavFor

仕様

• サムネイルをクリックするとスライダー本体（メインスライダー）のそのスライドに移動する。
• クリックするものはその画像でなくてもなんでもOK。
• 自動再生（autoplay:true）の場合に、スライダー本体で現在表示されているスライドに対応するサムネイル側の現在のスライドにエフェクトをあてることはできない。
  ※現在のスライドをサムネイル側でも連動させる場合は、方法②

実装方法

①スライダー本体とサムネイルを二つの別のスライダーとして記述（スライダー本体とサムネイルのHTML、JavaScrrptを別で記述。）

②オプション「asNavFor」でお互いのクラスを指定し、連動させる。（サムネイル用のスライダーをスライダー本体用のスライダーのナビとして使う設定をする。）

③サムネイル側のスライダーにオプション「focusOnSelect: true」を指定し、サムネイルをクリックするだけで、スライダー本体が動くようにする。

 <div class="slider">
   <div><img src="./img/img01.jpg" alt=""></div>
   <div><img src="./img/img02.jpg" alt=""></div>
   <div><img src="./img/img03.jpg" alt=""></div>
   <div><img src="./img/img04.jpg" alt=""></div>
 </div>
 <div class="thumbnail">
   <div><img src="./img/img01.jpg" alt=""></div>
   <div><img src="./img/img02.jpg" alt=""></div>
   <div><img src="./img/img03.jpg" alt=""></div>
   <div><img src="./img/img04.jpg" alt=""></div>
 </div>

$('.slider').slick({
   asNavFor:'.thumbnail', // 連動（お互いのクラスを指定）
   slidesToShow:1, // スライダー本体で見せる数
 });
 $('.thumbnail').slick({
   asNavFor:'.slider', // 連動（お互いのクラスを指定）
   focusOnSelect: true,  // クリックした要素にスライドする
   arrows: false,
   slidesToShow:4, // サムネイルを見せる数（サムネイルなので大抵はスライドの総数）
 });

方法② dotsを利用 ＆ customPaging

仕様

• サムネイルをクリックする場合も、自動再生（autoplay:true）で動くときも現在のスライド（slick-active）が連動する

asNavForを用いた方法①と違い、自動再生で動いたときのactiveなサムネイルにスタイルを当てる事が可能。

実装方法

①サムネイルのHTMLは自動で吐き出されるので、HTMLはメインスライドのみの記述でOK。

②dots（＝スライダー下にスライドの数だけ表示され、現在のスライドのドットの色が変わる）を利用するのでオプション「dots:true」を設定。

③オプション「customPaging」にfunctionでドット部分のコードをサムネイルに書き換える
（$(slider.$slides[i])で各スライダーのjQueryオブジェクトを取得できる）

④これで現在のスライド（アクティブ）がサムネイル側でも連動される（.slick-dotsの中にも .slick-activeが付く）ので、slick-activeが付いたときだけお好みのスタイルに変更することが可能。（opacityで透明にしたり…）

 <div class="slider">
   <div><img src="./img/img01.jpg" alt=""></div>
   <div><img src="./img/img02.jpg" alt=""></div>
   <div><img src="./img/img03.jpg" alt=""></div>
   <div><img src="./img/img04.jpg" alt=""></div>
 </div>

$('.slider').slick({
  dots:true,
  customPaging: function(slick,index) {
    // スライダーのインデックス番号に対応した画像のsrcを取得
    let targetImage = slick.$slides.eq(index).find('img').attr('src');
    // slick-dots > li　の中に上記で取得した画像を設定
    return '<img src=" ' + targetImage + ' "/>';
  }
});

スライドを連動させるのは、asNavForオプションだと思い込んでサムネイルでアクティブなスライドが連動しないことに苦戦していましたが、dotsを利用するこのやり方で解決しました。