便利なslick

asNavForというオプションをつかえば、スライダーと連動するサムネイルも作れるよね。

ただ困ったことがあって、たとえば4秒でスライダーが切り替わるように設定している場合、その4秒間の間に別のサムネイルをクリックしても動いてくれないことがある。

お客さんがサムネを連打したりすると「なんかちゃんと動いてません」という修正指示がくる。

slick asNavFor moving bugとかで検索したけど出なくて、よくやく自力で解決。

なんとオプションがありました。

waitForAnimate:true

このwaitForAnimateというのはアニメーションしてある間は他の操作をうけつけずに待機する、という機能で、デフォルトではtrueになっている。

これのおかげで遷移中にサムネイルをクリックしたり矢印(arrows)をクリックしたりしてもうまく動かなかったというわけだった。

この機能はもちろんあっていいんだけど、デフォルトはfalseにしておかないと不便だよね。まったく。


というわけでオプションはこんな感じになったよ。


$('.slider').slick({
asNavFor: '.slider-nav',
infinite: true,
autoplay: true,
autoplaySpeed: 4000,
dots:true,
arrows:true,
pauseOnHover: false,
fade:true,
waitForAnimate:false,
speed: 1000
})

$(".slider-nav").slick({
asNavFor: '.slider',
slidesToShow: 5,
waitForAnimate:false,
focusOnSelect: true
});