このBLANKsで好評のslick.jsの使い方を紹介する記事ですが、今回はサムネイル付きスライダーに焦点を当てて紹介していきます。


サムネイルもスライダーで動く

これは「slick.js」の使い方応用編でも紹介しましたが、もう一度説明していきます。

slick.jsでは2つのスライダーを連動させて動かすことができるオプション「asNavFor」があります。
このオプションを使用すれば、下記のようなサムネイル付きのスライダーを作成できます。

See the Pen slick-asNavFor_2 by blanks (@blanks-site) on CodePen.

こちらはオプション「asNavFor」も使用していますが、このオプションだけではサムネイルの画像をクリックして、メインのスライダーを切り替えることはできません。
asNavForはあくまで2つのスライダーを同期させることしかできません。

では、どうやって「サムネイルの画像をクリックしたら、メインのスライダーも切り替える」ことができるようになるのか?
それは「data-slick-index」とslickのメソッド「slickGoTo」を利用しています。

「slickGoTo」は指定したindex番号のスライドをカレントにしてくれます。
「data-slick-index」はスライド番号の属性です。
この2つを利用して、下記のような処理を追加しています。

  1. サムネイルスライダーのスライドをクリックしたら、クリックした「data-slick-index」を取得。
  2. 「slickGoTo」を使ってメインスライダーのカレントスライドを1.で取得した「data-slick-index」の番号のスライドに切り替える。


サムネイルは固定で、メイン画像だけスライダー

ご要望が多かったので、サムネイルの画像リストは固定で、メイン画像だけスライダーとして動くサンプルを作りました。
まずはデモを確認してみてください。

See the Pen slick width thumbnail1 by blanks (@blanks-site) on CodePen.

このサンプルはサムネイル画像リストにはスライダー機能としての機能を持っていないので、サムネイルは固定のままです。

こちらでは
slickのメソッド「slickGoTo
slickイベント「init」「beforeChange
を使用しています。
slickのメソッド・イベントについてはこちらの記事を参照ください。

処理としては、以下のようなことを行っています。

読み込み時

  1. サムネイル画像アイテム「.thumbnail-item」に属性値「data-index」を0から連番で付ける。
  2. slick初期化。
  3. slickが最初に初期化された後に発火するイベント「init」を使用して、slickが初期化された後の下記の処理を実行。

slickが最初に初期された後

  1. slickスライダーのカレントのスライド番号(data-slick-index)を取得
  2. サムネイル画像アイテム「.thumbnail-item」で属性値「data-index」が1.で取得したスライド番号と同じものに「thumbnail-current」のクラスを追加

サムネイル画像アイテムをクリックしたときにslickスライダーを切り替える。

  1. サムネイル画像アイテム「.thumbnail-item」をクリックしたら、クリックした「data-index」を取得。
  2. 「slickGoTo」を使ってslickスライダーのカレントスライドを1.で取得した「data-index」と同じ「data-slick-index」の値をもつスライドに切り替える。

slickスライダーを切り替ったしたときに、サムネイル画像アイテムのカレントを切り替える。
※slickのスライドが切り替わる直前に発火する「beforeChange」を使用する

  1. 「beforeChange」の引数「nextSlide」は切り替わるスライドのindex番号を返すので、nextSlideの値を取得。
  2. 全てのサムネイル画像アイテム「.thumbnail-item」から「thumbnail-current」クラスを削除。
  3. 「data-index」の値がnextSlideのサムネイル画像アイテム「.thumbnail-item」に「thumbnail-current」クラスを追加。

ぜひ、参考にして使ってくれたら嬉しいです。また新しいものが作れた紹介できたらいいなと思います。