「Slick.js」スライダーのボタンを押したときにスライドが止まるときの対処方法・使い方

スライダープラグイン「Slick.js」でスライダーのボタンを押すとautoplayに設定したスライドの動きが止まると言われてしまいました。

状況

• ボタンを押すと1度スライドが動くが止まる。
• マウスカーソルをブラウザから外すと再びスライダーが動き出す

このときにSlick.jsでスライド対応していた部分はスライドボタンをCSSのabsoluteで位置変更していたことを思い出しました。

そのためマウスカーソルが乗っているときのオプションが用意されているのでは？という結論に達したところカーソル系のオプションがありました。

• pauseOnFocus：フォーカスで一時停止
• pauseOnHover：マウスホバーで一時停止
• pauseOnDotsHover：ドットナビをマウスホバーで一時停止

マウスカーソルに関連するオプションをすべてfalseにしたところ、意図した動きになりました。

Slick.js内にリンクタグを付けtarget_blankで別ページでウィンドウを開いた場合に、 スライダーが止まるということがありました。（Safari）

pauseOnFoucus,pauseOnHover,PauseOnDotsHoverの処理を入れたら解消できました。

$('.slide').slick({
  dots: true,
  infinite: true,
  slidesToShow: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  pauseOnFocus: false,
  pauseOnHover: false,
  pauseOnDotsHover: false,
  waitForAnimate: false


});

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