slick.jsのドットナビゲーションをサムネイル画像に変更する

jQuery系スライダープラグインで有名なslick.jsで、画像のナビゲーションをサムネイル替わりに使いたい時、asNavFor:で2つのスライダーを紐付けてナビゲーションを作るやり方は公式のdemoにあったのですが、dotナビゲーションを画像のサムネイル表示に変更するやり方が、なかったので備忘録として作ってみました。

DEMO

html

<div class="layout">
    <ul class="slider">
        <li>
            <img src="https://unsplash.it/600/300/?image=42">
        </li>
        <li>
            <img src="https://unsplash.it/600/300/?image=43">
        </li>
        <li>
            <img src="https://unsplash.it/600/300/?image=49">
        </li>
        <li>
            <img src="https://unsplash.it/600/300/?image=60">
        </li>
        <li>
            <img src="https://unsplash.it/600/300/?image=106">
        </li>
    </ul>
</div>

js

$('.slider').slick({
    dots:true,
    prevArrow: '<a class="slick-prev" href="#"><i data-icon="ei-arrow-left" data-size="m"></i></a>',
    nextArrow: '<a class="slick-next" href="#"><i data-icon="ei-arrow-right" data-size="m"></i></a>',
    customPaging: function(slick,index) {
        // スライダーのインデックス番号に対応した画像のsrcを取得
        var targetImage = slick.$slides.eq(index).find('img').attr('src');
        // slick-dots > li　の中に上記で取得した画像を設定
        return '<img src=" ' + targetImage + ' "/>';
    }
});

dotナビゲーションの画像のopacityを0.5ぐらいにしておいて、slick-activeが付いたときだけ1にするようにCSSを書けば、currentの表現もあっという間ですね。