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

HTML/CSS
slick sample
slick sample

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

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

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

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

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

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

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

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

なお前提として、メインのスライダーは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で指定したスライダーのナビゲーションとして働きます。

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

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

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

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

focusOnSelectを指定しておく

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

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

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

以上で完了です。

asNavForの注意点

メインスライダーとサムネイルスライダーでスライド数が違っている場合、asNavForは機能しません。

自動でナビゲーション(サムネイルスライド)を生成するには、「customPaging」オプションを使用する方法があります(参考サイト:「イメージナビゲーションとスライダーの作成方法」)が、この場合メインスライドと同じ画像を読み込むことになるので、自動対応できるメリットと、ページのデータサイズが大きくなるというデメリットがあります。

メリット、デメリットを勘案して、状況に適した方法をお選びください。

ミフネWEB
タイトルとURLをコピーしました