プラグイン『slick』で、固定サムネイルと連動したスライダーを作る

スライダー作るの苦手だ！

プラグインってjsとcssを入れて、ちょっと記述するだけで動くのでめちゃんこお手軽だけど、調整がなんか難しい。

「お手軽」って前提があるから、うまく出来ないと泣きたくなるくらい凹む・・。

いつもはBx-Sliderを使っているのですが、chromeのアップデートによって「スライダー内のリンクを押す」「スワイプでスライドを動かす」というのが共存できなくなったっぽいです。

というわけで初めてslickというスライダーに手を出したわけですが。

slickの導入やサムネイル付きのスライダーの作り方は調べたら出てくるのですが、一応今回のコード貼っておきます。

↑これがスライダーのhtml
.thumbnail-thumbがサムネイルで、.thumbnailがスライダー部分です。

↑jQuery
これで、サムネイルをクリックすれば対応したスライダーが表示されるのですが、逆にスライダーを動かしたときにサムネイルが何も変わらなかったんですよね・・。
ちなみにサムネイルを固定させたかったので、.thumbnailにasNavFor: '.thumbnail-thimb'はつけていません。（両方スライドするならasNavForを互いにつければOKです）

というわけでこんな記述を足してみました。

スライダーをスワイプして変更する前に、次のスライドが何番目かを取得して、サムネイルに連動させます。
.slick-slideはサムネイルに勝手に付与されるクラスなので、そこから一度.slick-current（現在表示中のサムネイルに付与されるクラス）をすべて外し、その上で該当のサムネイルにクラスを付与しています。

beforeChangeは「スライドが変更される前に発火」するイベントです。

今回はこんな感じで対処して、とりあえずエラーはないです。
Chromeがまた修正されればBx-sliderでも行けるようになるかもですが、当面はこんな感じで。