slickスライドをドットの代わりにサムネイル連動にする

まれに質問があるので、スライダー系JQuery「slick」をサムネイルスライダーと連動させる方法について書いておきます。

slickが優秀なので、大して難しい作業は必要ありません。標準で用意されているオプションだけで実装できます。

INDEX

スライドを２つ作ってasNavForで連動させる
slickで、サムネイル連動スライドを作る方法
1. asNavForオプションで相手を指定する
2. focusOnSelectを指定しておく
asNavForの注意点

スライドを２つ作ってasNavForで連動させる

手順としては、メインとサムネイルのスライドを２つ作り、slickに標準で用意されているasNavForでお互いを連動させるだけです。

最近の実例では、Noweeeさん（アパレルネットショップ）に使用しました。

以下、具体的な方法を書いていきます。

slickで、サムネイル連動スライドを作る方法

とりあえずメインのスライドとサムネイルスライドの２つを用意します。

なお前提として、メインのスライダーは1枚ずつ表示させるスライドとします。

<ul id="main-slide">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>
<ul id="thumb-slide">
    <li>aaa-thumb</li>
    <li>bbb-thumb</li>
    <li>ccc-thumb</li>
</ul>

<script>
    $(document).ready(function(){
      $('#main-slide').slick({
          autoplay: false,
      });
      $('#thumb-slide').slick({
          autoplay: false,
          slidesToShow:5,
          slidesToScroll:3
      });
    });
</script>

サムネイルスライドは5枚表示（slidesToShow）、3枚ずつ動く（slidesToScroll）スライドにしています。

asNavForオプションで相手を指定する

あとは、slickの標準オプション「asNavFor」で相手を指定してやれば出来上がりです。

as Navigation For の名前の通り、asNavForで指定したスライダーのナビゲーションとして働きます。

ですので、サムネイルスライダーだけに指定しても良いですし、両方に指定しても良いです。

ここではサムネイルスライダーだけに指定してすすみます。

    $(document).ready(function(){
      $('#main-slide').slick({
          autoplay: false,
      });
      $('#thumb-slide').slick({
          autoplay: false,
          slidesToShow:5,
          slidesToScroll:3,
          asNavFor: '#main-slide',
      });
    });

この場合、サムネイルスライダーを矢印などで操作するとメインスライダーが連動しますが、逆は起こりません。

focusOnSelectを指定しておく

asNavForでサムネイルをメインスライドのナビに設定しましたが、これだと「サムネイル画像クリックでメインスライドを変更」はできません。

最後に「 focusOnSelect:true」（クリックしたスライドをスライダーの中心にする）を指定します。


    $(document).ready(function(){
      $('#main-slide').slick({
          autoplay: false,
      });
      $('#thumb-slide').slick({
          autoplay: false,
          slidesToShow:5,
          slidesToScroll:3,
          asNavFor: '#main-slide',
          focusOnSelect:true、
      });
    });

以上で完了です。