【jQuery】slickでhoverするとAutoplayが止まる現象の対策

slickに関するテクニックの内容

今回はWeb制作でjQueryのプラグインを使用したスライダー（slick）の実装に関する内容です。slickは初期設定ではpauseOnFocusとpauseOnHoverがtrueになっています。
なので、スライダーをホバーしたりフォーカスするとAutoplayが止まってしまいます。
これを回避する為にはオプションをfalseに設定しましょう。

>> 対策のDEMO（View Demo）

slickのオプション記述内容

$(function() {
  $('.list02').slick({
    autoplay: true,
    autoplaySpeed: 3000,
    arrows: false,
    fade: true,
    pauseOnFocus: false,//フォーカスで一時停止
    pauseOnHover: false,//マウスホバーで一時停止
    pauseOnDotsHover: false//ドットナビをマウスホバーで一時停止
  });
});

PR

ChatGPT 120%活用術 [ ChatGPTビジネス研究会 ] 価格：1,390円（税込、送料無料) (2023/5/23時点) 楽天で購入

この記事を書いた人（著者情報）

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。