お問い合わせはコチラから

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

サイト運営

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

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 & much more!

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

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

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

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

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

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

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

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

slick.jsでサムネイル付きスライダーを作成する | takblog
何度か取り上げている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;
}

しかし、クリックしても連動しない時がある

実際にカスタマイズをTCDテーマに組み込んでみると確かに表示はされました。

しかし、何回か違う画像をクリックした時にスライダーが切り替わる時と切り替わらない時がありました。

最初はクリックできる範囲が狭くて、クリックしにくいだけ?と思ってあまり気にしなかったのですが、実はそうではありませんでした。

それがはっきりしたのは、on.clickイベントではなく、on.hoverイベントに切り替えた時でした。

サムネイルの上にマウスポインタを載せて別のサムネイルに次々にマウスポインタを動かしていくと反応しなくなるからです。

イベントは必要な数だけ発生していたので、イベントごとの処理を受け付けない時があるというのがあきらかでした。

実は、slickGoToはスライダーがアニメーション中は無視される

サムネイルのクリックによりスライダー表示を切り替える仕組みは、サムネイルのクリックイベントが発生した時にslickGoToメソッドを使用して実現しています。

slickGoTo
引数:int : slide number, boolean: dont animate

機能:Navigates to a slide by index

結論から言いますと、slickGoToはスライダーがアニメーション中は無視されます。スライダーを切り替えるアニメーション期間中に複数回のslickGoToが発生するとスライダー側で無視する仕様です。

アニメーション期間中にslickGoToを有効にするには?

slickにはwaitForAnimateオプションがあります。

waitForAnimate

Ignores requests to advance the slide while animating

GitHub - kenwheeler/slick: the last carousel you'll ever need

slickのwaitForAnimateオプションをFalseにすることで解決します。

waitForAnimateオプションは初期状態でTrueですので、オプション指定しないとスライダー切り替わり時のアニメーション期間中はslickGoToが無視されてしまうのです。

Javascriptとか嫌な人はSnow monkey blockを使いましょう

Slickのスライダーを気軽に使いたい人は、以下のプラグインを導入すればGutenbergのブロックとして利用可能です。

Snow Monkey Blocks
モンキーレンチ作の Gutenberg ブロック集。

まとめ

waitForAnimateオプションをFalseにすることで、スライダーとサムネイルの連動は完璧にワークするようになりました。

 

タイトルとURLをコピーしました