slickのページングにjQueryを使ってイメージを設定する方法

引き続きjQueryプラグイン「slick」に関するTipsで、ページングにイメージを設定したいときにjQueryを使ってメインスライドのイメージをそのまま使い回したり、ページング部分のHTMLを記述する手間を省いて少しでも楽して設定する方法です。

slickの基本的な使い方や実装方法については下記でもサイトやGitHubで確認できるので省略します。

ページングをイメージに変更 #1

slickでページングをイメージに変更した実装イメージ

上のイメージのように、メインスライドの各イメージをそのままスライドを切り替えるページング部分に使用するもので、メインもページングも同じイメージを使う想定なのであれば、この方法で実装しておくことでスライドが増減する度に両方いじる手間を省くことができます。

まず、HTMLは下記のようにメインスライド部分のみ記述します。

<div id="slick">
  <div><img src="img01.jpg" alt=""></div>
  <div><img src="img02.jpg" alt=""></div>
  <div><img src="img03.jpg" alt=""></div>
  <div><img src="img04.jpg" alt=""></div>
  <div><img src="img05.jpg" alt=""></div>
</div>

上記HTMLを見るとページングの部分のHTMLがないように思えますが、このHTMLでslickを下記のような形で呼び出してあげるとイメージページングを実装することができます。

jQuery

$(function() {
  $('#slick').slick({
    dots: true,
    customPaging: function(slider, i) {
      var thumbSrc = $(slider.$slides[i]).find('img').attr('src');
      return '<img src="' + thumbSrc + '">';
    }
  });
});

具体的な動きとしてはメインスライドにある画像のパスをそれぞれ取得し、それを使って新たなimg要素を作成してページング部分にそれぞれ適用するというものになります。
あとは少しスタイル調整などしてあげれば上のイメージのようにページング部分をイメージに変更できます。

Demo

ページングをイメージに変更 #2

slickでページングをイメージに変更した実装イメージ

基本的な動作は上で紹介したものと同じようにページング部分にそれぞれ指定したイメージを適用するものですが、こちらはメインスライドで使用しているイメージとは別のものを指定したいときに使える方法です。

HTMLは同じくメインスライド部分のみ記述しますが、下記のようにdata属性を使用し、この部分にはページングとして表示したい画像のパスを記述します。

<div id="slick">
  <div data-thumb="icon01.png"><img src="img01.jpg" alt=""></div>
  <div data-thumb="icon02.png"><img src="img02.jpg" alt=""></div>
  <div data-thumb="icon03.png"><img src="img03.jpg" alt=""></div>
  <div data-thumb="icon04.png"><img src="img04.jpg" alt=""></div>
  <div data-thumb="icon05.png"><img src="img05.jpg" alt=""></div>
</div>

slickの呼び出しについては下記のように記述します。

jQuery

$(function() {
  $('#slick').slick({
    dots: true,
    customPaging: function(slider, i) {
      var thumbSrc = $(slider.$slides[i]).data('thumb');
      return '<img src="' + thumbSrc + '">';
    }
  });
});

img要素を作成してページング部分にそれぞれ適用するという動きはひとつ目のサンプルと一緒で、その作成するimgのsrcに指定するものは各スライド要素に記述したdata属性（このサンプルの場合はdata-thumb）の内容を利用しています。

実際の動きについては以下デモで確認でき、このサンプルの場合はページングで使うイメージとして動物のアイコンを使用する形にしています。

Demo

連動したイメージページング

slickで連動したイメージページングの実装イメージ

「1. ページングをイメージに変更 #1」のようにメインスライドとページングとで同じイメージを使い且つそれらの動きを連動させたいという場合にそのまま利用できるサンプルです。
ほぼslickのデモにある「Slider Syncing」で紹介されている動きですが、デモではメインスライドとページングとで同じようなHTMLをそれぞれ記述しているのを、以下で紹介する方法でメインスライドのHTMLのみ記述してページング部分で使用するHTMLはjQueryを使って生成したものを使用する形にして実装できます。

まず、HTMLは下記のようにメインスライド部分のみ記述します。

<div id="slick">
  <div><img src="img01.jpg" alt=""></div>
  <div><img src="img02.jpg" alt=""></div>
  <div><img src="img03.jpg" alt=""></div>
  <div><img src="img04.jpg" alt=""></div>
  <div><img src="img05.jpg" alt=""></div>
</div>

jQueryは下記のように記述し、'#slick'と'slick-thumb'の箇所はメインスライドで指定しているidとイメージページングで使用したいidを記述します。
idではなくclassにしたい場合は、$carouselの方は単純にidからclassに変更して、$carouselThumbの方は.attr()ではなく.addClass()を使用する形に変更してください。

jQuery

$(function() {
  var $carousel = $('#slick'),
      $carouselThumb = $carousel.clone().attr('id', 'slick-thumb').insertAfter($carousel);
  $carousel.slick({
    fade: true,
    autoplay: true,
    autoplaySpeed: 3000,
    slidesToShow: 1,
    slidesToScroll: 1,
    asNavFor: $carouselThumb
  });
  $carouselThumb.slick({
    autoplay: true,
    autoplaySpeed: 3000,
    slidesToShow: 5,
    slidesToScroll: 1,
    centerMode: true,
    focusOnSelect: true,
    asNavFor: $carousel
  });
});

具体的な動きとしてはメインスライドで使用しているHTMLをそのままjQueryの.clone()を使ってコピーし、それをidを書き換えてから.insertAfter()でメインスライドの後に挿入をしています。
あとは、それぞれのスライド要素に対して連動に必要なasNavForをはじめとする各オプション設定をして呼び出せば実装できます。

これを使うことでものすごく楽になるかと言われればそこまでではないですが、同じようなスライドをいくつも設置するという場合であればHTMLの記述量が減るので多少は手間を省けるかなと思います。

実際の動きについては以下デモで確認できます。

Demo