Slick スライダーをサムネイルと連動させて切り替える方法

この記事は、slick.jsでslickGoToを使用したら反応が悪い？と思ったときにチェックしたいslick.jsのオプション（waitForAnimate）について記載しています。この記事を読むことでslick.jsのslickGoToの動きや制約を理解することができるので、期待と違う動きに悩まされることが無くなります。

この記事で分かること

Slick.jsとは
Slick.jsでサムネイルとスライダーの連動を実装したい
しかし、クリックしても連動しない時がある
実は、slickGoToはスライダーがアニメーション中は無視される
アニメーション期間中にslickGoToを有効にするには？
Javascriptとか嫌な人はSnow monkey blockを使いましょう
Slickは面倒だという人にはfotoramaプラグインがおススメ
まとめ

Slick.jsとは

Slick.jsとは、一言で言えば、jQueryで作られた、スライダー実現するjsプラグインです。

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping ...

Webでスライダーを見かけたらSlickかSwiperだと思って間違いないでしょう。それぐらい、slick.jsを使うのがもはや定番化しています。

ところで、プラグインと聞いてWordpressのプラグインを思い浮かべる人はjavascriptのプラグインと聞くと腰が引けるのではないかと思います。

しかし、心配はいりません。jQueryのプラグインはとても良くできていてあまり深く考えずに使えるのが最大の魅力です。実際使ってみると意外と簡単じゃない？ということになると思います。そうすると、他のプラグインも使えるようになると思いますので、まずは毛嫌いせずに使ってみることをおススメします。

Slick.jsでサムネイルとスライダーの連動を実装したい

ことの始まりは、次のような要望から始まりました。

TCDのテーマを使用
アイキャッチ画像を複数使用したい
そのアイキャッチ画像はサムネイル一覧をクリックすると切り替わるようにしたい

TCDのテーマだとアイキャッチ画像は複数指定できてスライダー表示できます。もちろんスライダーはslick.jsを使用して実現されています。

だったら、スライダーに使用している画像をサムネイル一覧にしてクリックしたら表示が切り替わるようにしたらええよね？とおもって検索するとそのものずばりのサイトがありました。

slick.jsでサムネイル付きスライダーを作成する

何度か取り上げているslick.jsの使い方ですが、今回はサムネイル付きスライダーを作成します。サムネイルがスライダーのものや、サムネイルを固定した（サムネイルをスライドさせない）スライダーなどいくつか紹介します。

これはよさそう！

HTMLコード例

<div id="wrap">
<ul id="slider">
<li class="slide-item"><img data-lazy="画像1.jpg" alt="画像"></li>
<li class="slide-item"><img data-lazy="画像2.jpg" alt="画像"></li>
<li class="slide-item"><img data-lazy="画像3.jpg" alt="画像"></li>
<li class="slide-item"><img data-lazy="画像4.jpg" alt="画像"></li>
<li class="slide-item"><img data-lazy="画像5.jpg" alt="画像"></li>
<li class="slide-item"><img data-lazy="画像6.jpg" alt="画像"></li>
</ul>
<ul id="thumbnail-list">
<li class="thumbnail-item"><img src="画像_1.jpg" alt="画像"></li>
<li class="thumbnail-item"><img src="画像_2.jpg" alt="画像"></li>
<li class="thumbnail-item"><img src="画像_3.jpg" alt="画像"></li>
<li class="thumbnail-item"><img src="画像_4.jpg" alt="画像"></li>
<li class="thumbnail-item"><img src="画像_5.jpg" alt="画像"></li>
<li class="thumbnail-item"><img src="画像_6.jpg" alt="画像"></li>
</ul>
</div>

javascriptコード例

$(function(){
var slider = "#slider"; // スライダー
var thumbnailItem = "#thumbnail-list .thumbnail-item"; // サムネイル画像アイテム

// サムネイル画像アイテムに data-index でindex番号を付与
$(thumbnailItem).each(function(){
var index = $(thumbnailItem).index(this);
$(this).attr("data-index",index);
});

// スライダー初期化後、カレントのサムネイル画像にクラス「thumbnail-current」を付ける
// 「slickスライダー作成」の前にこの記述は書いてください。
$(slider).on('init',function(slick){
var index = $(".slide-item.slick-slide.slick-current").attr("data-slick-index");
$(thumbnailItem+'[data-index="'+index+'"]').addClass("thumbnail-current");
});

//slickスライダー初期化
$(slider).slick({
autoplay: true,
arrows: false,
fade: true,
infinite: false //これはつけましょう。
});
//サムネイル画像アイテムをクリックしたときにスライダー切り替え
$(thumbnailItem).on('click',function(){
var index = $(this).attr("data-index");
$(slider).slick("slickGoTo",index,false);
});

//サムネイル画像のカレントを切り替え
$(slider).on('beforeChange',function(event,slick, currentSlide,nextSlide){
$(thumbnailItem).each(function(){
$(this).removeClass("thumbnail-current");
});
$(thumbnailItem+'[data-index="'+nextSlide+'"]').addClass("thumbnail-current");
});
});

CSSコード例

#wrap {
background-color: #333;
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
}

#slider {
width: 300px;
margin: 0 auto 30px;
}

.slide-item img {
width: 100%;
}

#thumbnail-list {
width: 300px;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.thumbnail-item {
flex: 0 1 30%;
margin-bottom: 10px;
box-sizing: border-box;
position: relative;
}
.thumbnail-item:after {
content: '';
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
transition: .3s opacity linear;
}
.thumbnail-item.thumbnail-current:after {
opacity: 0;
}
.thumbnail-item img {
width: 100%;
margin: 0 auto;
}