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

1 slickに関するテクニックの内容
2 slickのオプション記述内容

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

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

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

楽天で購入

フリーランスの請求書を即日払い【FREENANCE】

SHIBA ZEN PETFOODS JAPAN

法律をもっと身近にする話題のメディアサイト「法律ビッグバン」

アニメ・漫画の登場人物やゲームキャラクターの現在の年齢まとめ

TwitterやYouTube、TikTok、SNSで話題の猫（ネコ、ねこ）情報まとめ

TikTokで人気急上昇のTikToker（ティックトッカー）情報まとめ

Webデザイナー必見！楽天市場ショップの人気商品バナー広告まとめ

SNSで見かけた富裕層・金持ち・高所得者・セレブのおもしろ情報と占いまとめ

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

片山

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