「Slick.js」でサムネイルはスライドしないで固定させる実践的な使い方

案件でスライドを実装しないといけなくなり、Slider Proで対応しようとしたのですが、

「1枚の画像のときにスライダーを表示させないでくれ」と言われてしまい
1枚の画像のケースがありえるの？とツッコミしたくなりました。

スライダーを使うのだから複数枚画像は用意するでしょう！というのは
製作者側の勝手な意見なのでしょうかねえ。

さて、Slider Proを見直したところ、矢印部分や背景にCSSで編集を加えていたため
1枚画像の場合に矢印が表示されてしまう事態となってスライダーをSlickへ変更しました。

slick ライセンス

MITライセンス/個人無料・商用無料
slickはjQueryを利用します。

slick デモサンプルURL/公式ドキュメント

slickのサムネイルスクロール幅で泥沼にハマる

slickはオプション値やスライダー実装例が多くあるので幅広い対応が可能です。

1点ハマったところがあり、メイン画像とサムネイルを連携表示させているときに
スクロール幅をオプションで調整できないことでした。

スクロール幅を調整できないと、2枚しかスライド画像がないときに
サムネイルがどんどん遠ざかっていく由々しき事態になります。

slick サムネイルは固定してメイン画像はスライドさせる実践的使用法

どうしたものかと悩んだ挙げ句に解決方法が見つかりました。

スライダーのページング用ドットをサムネイルとして置き換えるやり方です。

ページング用ドットならサムネイルを固定したまま
スライダー画像を動かせます。

ドット表示オプション値をtrueにし、
customPagingのオプションでスライダーに使っている画像のURLを
ドットの場所へ置き換えます。

あとはドットを配置しているslick.css,slick-theme.cssを調整します。

$(function() {
  $('#slick').slick({
    dots: true,
    customPaging: function(slider, i) {
      var thumbSrc = $(slider.$slides[i]).find('img').attr('src');
      return '';
    }
  });
});

See the Pen
slick.js sample by miccyome (@miccyome)
on CodePen.

• 「Slick.js」指定できるオプション豊富な定番jQueryスライダープラグイン
• 「Slick.js」でサムネイルはスライドしないで固定させる実践的な使い方
• スライダープラグイン「slick.js」の使い方・カスタマイズ方法/ スライドドットの大きさを変える、色を変える
• 「Slick.js」スライダーのボタンを押したときにスライドが止まるときの対処方法・使い方

ソース参照URL

slickのページングにjQueryを使ってイメージを設定する方法 | NxWorld