今回はサムネイル付きスライダーに焦点を当てて紹介していきます。
サムネイルもスライダーで動く
これは「slick.js」の使い方応用編でも紹介しましたが、もう一度説明していきます。
slick.jsでは２つのスライダーを連動させて動かすことができるオプション「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」はスライド番号の属性です。
この２つを利用して、下記のような処理を追加しています。
- サムネイルスライダーのスライドをクリックしたら、クリックした「data-slick-index」を取得。
- 「slickGoTo」を使ってメインスライダーのカレントスライドを1.で取得した「data-slick-index」の番号のスライドに切り替える。
サムネイルは固定で、メイン画像だけスライダー
ご要望が多かったので、サムネイルの画像リストは固定で、メイン画像だけスライダーとして動くサンプルを作りました。
まずはデモを確認してみてください。
See the Pen slick width thumbnail1 by blanks (@blanks-site) on CodePen.
このサンプルはサムネイル画像リストにはスライダー機能としての機能を持っていないので、サムネイルは固定のままです。
こちらでは
slickのメソッド「slickGoTo」
slickイベント「init」「beforeChange」
を使用しています。
slickのメソッド・イベントについてはこちらの記事を参照ください。
処理としては、以下のようなことを行っています。
読み込み時
- サムネイル画像アイテム「.thumbnail-item」に属性値「data-index」を0から連番で付ける。
- slick初期化。
- slickが最初に初期化された後に発火するイベント「init」を使用して、slickが初期化された後の下記の処理を実行。
slickが最初に初期された後
- slickスライダーのカレントのスライド番号（data-slick-index）を取得
- サムネイル画像アイテム「.thumbnail-item」で属性値「data-index」が1.で取得したスライド番号と同じものに「thumbnail-current」のクラスを追加
サムネイル画像アイテムをクリックしたときにslickスライダーを切り替える。
- サムネイル画像アイテム「.thumbnail-item」をクリックしたら、クリックした「data-index」を取得。
- 「slickGoTo」を使ってslickスライダーのカレントスライドを1.で取得した「data-index」と同じ「data-slick-index」の値をもつスライドに切り替える。
slickスライダーを切り替ったしたときに、サムネイル画像アイテムのカレントを切り替える。
※slickのスライドが切り替わる直前に発火する「beforeChange」を使用する
- 「beforeChange」の引数「nextSlide」は切り替わるスライドのindex番号を返すので、nextSlideの値を取得。
- 全てのサムネイル画像アイテム「.thumbnail-item」から「thumbnail-current」クラスを削除。
- 「data-index」の値がnextSlideのサムネイル画像アイテム「.thumbnail-item」に「thumbnail-current」クラスを追加。
ぜひ、参考にして使ってくれたら嬉しいです。また新しいものが作れた紹介できたらいいなと思います。