【slick】ホバーすると自動再生が止まってしまう原因と対策

Webサイトでスライダーを実装する際に便利な「slick」ですが、自動再生（autoplay）を設定しているのに、スライダーにマウスカーソルを乗せると動きが止まってしまうという現象に悩まされたことはありませんか？

今回この問題に直面したので、slickでホバーしても自動再生が止まらないようにする方法について紹介します。

使用していたslickの設定

まずは、問題が起きたときに使用していたslickの初期化コードを紹介します。

$(function() {
  const $slider = $("#slider");
  $slider.slick({
    autoplay: true,
    speed: 2000,
    slidesToShow: 1,
    arrows: false,
    centerMode:true,
    centerPadding:"10%",
  });
});

一見、これで自動再生が有効になっているように思えます。
しかし、実際に動作させてみると、スライダーにマウスカーソルを乗せた瞬間に再生が停止してしまうのです。

原因は「pauseOnHover」のデフォルト設定

この挙動の原因は、slickのデフォルト設定にあります。
slickは初期状態で以下のように動作します：

• pauseOnHover: true（ホバーすると自動再生を一時停止する）
• pauseOnFocus: true（フォーカスすると一時停止する）

つまり、特に設定していない場合、自動的にホバーで止まる仕様になっているというわけです。

解決方法：オプションを追加するだけ

この挙動を回避したい場合は、オプションに以下を追記するだけでOKです。

pauseOnHover: false,
pauseOnFocus: false,

修正後のコード

$(function() {
  const $slider = $("#slider");
  $slider.slick({
    autoplay: true,
    speed: 2000,
    slidesToShow: 1,
    arrows: false,
    centerMode: true,
    centerPadding: "10%",
    pauseOnHover: false,
    pauseOnFocus: false,
  });
});

これで、ホバーやフォーカスしてもスライダーは止まらず、スムーズに自動再生を続けてくれます。

まとめ

slickでスライダーを実装する際に、意図せず自動再生が止まってしまう場合は、次の2つの設定を確認しましょう。

ちょっとした設定の違いで大きく挙動が変わるので、slickの仕様を理解した上で必要なオプションをしっかり設定することが大切です。