JavaScript

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

スポンサードリンク
スポンサードリンク

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

状況

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

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

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

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

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

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

WordPress運営が楽になるおすすめのサーバーをご紹介

WordPressおすすめのサーバー

スポンサードリンク

-JavaScript
-, ,

© 2021 さくらいらぼWEB版 /個人ブログ