[slick.js] バグ（不具合）の対策

sliderの中でも一番よく使っているpluginだけどバグ・不具合っぽいのに時折ぶつかるのでメモ。
（現時点17年4月で最新verのもので確認）

1.fade + autoplayで、dotをタップするとautoplayが止まってしまう

スマホの場合のみに、fadeとautoplayを設定すると、dots（ページャー）をタップした時に
autoplayが止まってしまう。

一度この現象が起こるとその後のautoplayは動作しない模様で、例えば
一度止まって→スワイプなどではslide移動可能→それでもその後autoplayは動かない。

• focusが取れてないのかと思ってpauseOnHover や pauseOnDotsHoverとかを無効にしてもだめ
• fadeからsliderモードに戻すと正常に治る
• 調べても全然情報でてこない

解決策

dotsのデフォルトclickイベントをoffして、代わりにslickGoToで代用。

let $slider = $('.slider');

//動的に作られるdotにアクセスしたいので
//init後に処理を書く
$slider.on('init', ()=>{
    let $dots = $slider.find('.slick-dots li');

    $dots
        .off('click')//デフォルトのclickを消す
        .on('click', (e)=>{
            let clickedIndex = $dots.index($(e.currentTarget));//クリックされたdotsのindex取得
            
            $slider.slick('slickGoTo', clickedIndex);//本来の動作をslickGoToで代用
        });
})

//普通にslick実行
$slider.slick({
    fade: true,
    autoplay: true,
    dots: true,
    //inifinite: true ← 無限ループにすると何故かバグる（後述）
});

注意

上記の通り、何故かinifinite:trueにすると

• autoplayが最後まで行くと、最初へ戻ると思いきや、なぜか・・・逆ループし始める

（順次追加）