Unityアセットストアセール中!

「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
  
  
});
スポンサードリンク
[WordPressのライティング向けプラグイン]
ワードプレスオリジナルプラグイン >>

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

スポンサーリンク

コメント

コメントする

目次
閉じる