【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//ドットナビをマウスホバーで一時停止
  });
});

JavaScript 第7版 [ David Flanagan ] 価格：5060円（税込、送料無料) (2023/1/5時点) 楽天で購入

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

片岡 学

カタチップ編集長。昭和生まれの30代でWeb業界歴は15年。プログラマー出身のWebデザイナー。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのディレクター兼コーダーを担当。最近はSNSの運用にも業務範囲を拡大中です。