slick.jsでサムネイルを使うときの注意点

カルーセルで画像を切り替える動きを付けるのに、slick.js というとても便利なライブラリがあります。

slick の便利な機能として、メイン画像とサムネイル画像を用意し、メイン画像の切り替えに合わせてサムネイル画像をスライドさせる機能があります。

しかしながこの機能、サムネイル画像の数が多ければ問題ないのですが、数が少なく slidesToShow オプションの数と同数かそれ以下のとき、メイン画像が切り替わるとサムネイルが左にスライドしていって余白が生まれてしまいます。

サムネイル画像が slidesToShow より少ないと左右のスライド用のコピー画像が作られないのが原因のようで、これを解決するために、メイン画像が切り替わる際にサムネイル画像を再表示することで、左にスライドするアニメーションをキャンセルさせることにしました。

ただ再表示は slickSetOption メソッドだけのようだったため、適当なオプションを設定するようにしました。

メイン画像、サムネイル画像の HTML は

<div class="slick-img">
    <div><img src="./img/img01.jpg" alt=""></div>
    <div><img src="./img/img02.jpg" alt=""></div>
    <div><img src="./img/img03.jpg" alt=""></div>
</div>
<div class="slick-thumbnail">
    <div class="slick-thumbnail_item"><img src="./img/img01_thumb.jpg" alt=""></div>
    <div class="slick-thumbnail_item"><img src="./img/img02_thumb.jpg" alt=""></div>
    <div class="slick-thumbnail_item"><img src="./img/img03_thumb.jpg" alt=""></div>
</div>

といった感じで、JavaScript は次のようになります。

$('.slick-img').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    if ($('.slick-thumbnail .slick-thumbnail-item').length < 4) {
        $('.slick-thumbnail').slick('slickSetOption', 'centerMode', true, true);
    }
});

メイン画像とサムネイル画像の切り替えを連動しているとき、相手を切り替えるときはどうやら beforeChange イベント内で実行されているようなので、このイベントに割り込んで、更にサムネイル画像が slidesToShow 以下のときに slickSetOption メソッドでサムネイル画像領域をリフレッシュしています。

実際のデモは Github にアップしましたので、そちらを参考にしてください。

https://github.com/gakuya/slick.js_thumbnail-demo

しかしこの動作は標準で用意しておいて欲しいような気もしますね…。