【jQuery】slickスライダーのdotsをサムネイルにする

通常、slick スライダーでサムネイルをつける場合は、
もう一つサムネイル用のスライダーを用意して２つのスライダーを連動させるのが一般的だと思いますが、
dotsをサムネイルにすることができます。

$('.slider').slick({
  dots:true,
  customPaging: function(slick,index) {
    // スライダーのインデックス番号に対応した画像のsrcを取得
    let thumb = slick.$slides.eq(index).find('img').attr('src');
    // slick-dots > li　の中に上記で取得した画像を設定
    return '<img src=" ' + thumb + ' "/>';
  }
});

２つのスライダーを連動させる場合、
なぜかうまくいかないことがありますが、
dotsを使えば連動しないことはないと思うので、
こっちの方がいいかなと思います。