[slick.js]サムネイルを設置する方法

知らないと詰みポイントがある。

html
js（jQuery）
css
まとめ・注意点

html

メインとサムネで２つ設置する。

<div class="slider" id="slick_main">
    <div class="slide"><img src="https://placehold.jp/1280x720.png" alt=""></div>
    <div class="slide"><img src="https://placehold.jp/1280x720.png" alt=""></div>
    <div class="slide"><img src="https://placehold.jp/1280x720.png" alt=""></div>
    <div class="slide"><img src="https://placehold.jp/1280x720.png" alt=""></div>
    <div class="slide"><img src="https://placehold.jp/1280x720.png" alt=""></div>
</div>
<div class="slider" id="slick_thumb">
    <div class="slide"><img src="https://placehold.jp/100x100.png" alt=""></div>
    <div class="slide"><img src="https://placehold.jp/100x100.png" alt=""></div>
    <div class="slide"><img src="https://placehold.jp/100x100.png" alt=""></div>
    <div class="slide"><img src="https://placehold.jp/100x100.png" alt=""></div>
    <div class="slide"><img src="https://placehold.jp/100x100.png" alt=""></div>
</div>

js（jQuery）

並びをミスると動かない。設置順になるように注意する。

$(function(){
    $('#slick_main').slick({
        arrows: false,
        autoplay: true,
        autoplaySpeed: 6000,
        speed: 1000,
        infinite: true,
        asNavFor: "#slick_thumb",
    });
    $('#slick_thumb').slick({
        arrows: false,
        infinite: true,
        slidesToShow: 5,
        asNavFor: "#slick_main",
        focusOnSelect: true,
    });
})

サムネを全部表示するためにslidesToShowを掲載数にあわせる。

css

メインの方は割愛。

サムネの方をイジる必要がある。

#slick_thumb .slick-track{
    transform: unset !important;
}

スライドする動きはcssのtransformで付与されているのでこれを解除する。

そうしないとスライドするごとにサムネの表示数が減っていく。

で、アクティブと非アクティブで表示を変えたいならこんな感じで振り分ける。

/* 非アクティブ */
#slick_thumb .slide img{
    opacity: .6;
    transition: opacity .2s;
}
/* アクティブ */
#slick_thumb .slide.slick-current img{
    opacity: 1;
}

非アクティブなら薄くする、みたいな。

まとめ・注意点

個人的な趣味というか方向性というかで、サムネ付きのスライドは枚数を固定して作る。

そうしないとサムネ側のデザインが崩れるのでめんどくさい。一応調整もできるだろうけど、青天井で仕込める作りにすると運用側がてんこ盛りにする可能性が普通にある。これをやるとそもそも枚数の多いスライドって普通全部見られないし、通信量とDOM数が無駄に増えて無駄に負荷をかけるだけ。

wpに仕込む場合、例えばチェックを入れた記事を取得して表示させる組み方をするときは取得数に上限が付けられるので、「仕様です」を機能的にも強制できるのでなんとかなる。

自作できるから自由度が高いのだけど、そうなると逆に自らが制限を作らなきゃいけないのだという意識が大事。