jQueryのスライダープラグイン「slick」で自動再生を設定したのに、画像をクリックしたりマウスを乗せたりすると、オートスライドが途中で止まってしまう——制作の現場でよく出くわす挙動です。

結論から言うと、これはバグではなく仕様で、pauseOnFocus・pauseOnHover・pauseOnDotsHoverの3つのオプションをfalseにすることで、止まらないようにできます。この記事では、なぜ止まるのかという理由から、具体的な設定方法、そして設定する際に意識したいUX面の注意点までを解説します。

なぜslickは途中で止まるのか

slickには、ユーザーがスライダーを操作しようとしたときに自動再生を一時停止する機能が、はじめから備わっています。マウスが乗っている間やフォーカスが当たっている間は「今ユーザーが見ようとしている」と判断し、勝手にスライドが進まないよう配慮する仕組みです。

この一時停止は、次の3つのオプションがデフォルトでtrue（有効）になっていることで起こります。つまり、何も指定しなければ「操作中は止まる」のが標準の動作というわけです。止めたくない場合は、これらを明示的にfalseにして無効化します。

3つのオプションで自動再生を止めない

実際の設定は次のとおりです。slickの初期化オプションに、3行を追加するだけです。

<script>
    $(function() {
        $('.slick').slick({
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
            fade: true,
            speed: 2000,
            autoplaySpeed: 3000,
            autoplay: true,
            pauseOnFocus: false,
            pauseOnHover: false,
            pauseOnDotsHover: false
        });
    });
</script>

これで、ホバーやクリックの操作があっても自動再生が止まらず、スライドが流れ続けるようになります。

各オプションが制御している動作

3つのオプションは、それぞれ止まるきっかけが異なります。役割を理解しておくと、「ホバーでは止めたいがドットでは止めたくない」といった細かい調整もできるようになります。

• pauseOnHover：スライダー本体にマウスが乗っている間、自動再生を止める
• pauseOnFocus：スライダー内の要素にフォーカスが当たっている間、自動再生を止める
• pauseOnDotsHover：ページネーションのドットにマウスが乗っている間、自動再生を止める

「マウスを乗せても止まらないが、ドットにカーソルを合わせたときだけは止めたい」という場合は、pauseOnHoverとpauseOnFocusだけをfalseにし、pauseOnDotsHoverはtrueのまま残す、といった使い分けが可能です。

手動で再生・一時停止を制御したい場合

オプションによる自動制御とは別に、slickにはメソッドで再生・一時停止を操作する仕組みもあります。任意のボタンなどをきっかけに、slickPauseで一時停止、slickPlayで再生を切り替えられます。

// 一時停止
$('.slick').slick('slickPause');
// 再生
$('.slick').slick('slickPlay');

「再生／停止ボタンを自分で用意したい」といったケースでは、オプション側で自動の一時停止を切っておき、これらのメソッドで明示的に制御すると扱いやすくなります。ユーザーが自分で止められる導線を用意しておけば、次に触れるアクセシビリティ面の懸念もカバーできます。

止めないときに意識したいこと

1点だけ補足しておきます。ホバーやフォーカスで一時停止する挙動は、もともと「ユーザーが読もうとしているものを勝手に切り替えない」というアクセシビリティ上の配慮でもあります。オートスライドを止めないようにすると、ユーザーがスライド内のテキストを読んでいる最中に次へ進んでしまうこともあります。

そのため、文字情報が多いスライダーではautoplaySpeedを長めに取る、あるいは操作中は止める挙動を残すなど、コンテンツの性質に合わせて判断するのがおすすめです。装飾的なメインビジュアルなら止めない、読ませたい情報が多いなら止める、と切り分けると失敗しません。

もう1点、これらのオプションとは別に、ブラウザの仕様としてタブが非表示（バックグラウンド）になっている間は自動再生が実質的に止まることも覚えておくとよいでしょう。これはタイマー処理を抑制するブラウザ側の省エネ動作によるもので、slickの設定では制御できません。別のタブから戻ってきたときに再開するので、不具合ではない点だけ押さえておけば十分です。

まとめ

• slickが操作中に止まるのは仕様で、一時停止オプションがデフォルトで有効なため
• pauseOnFocus・pauseOnHover・pauseOnDotsHoverをfalseにすれば止まらなくなる
• 3つは止まるきっかけが違うので、個別にtrue／falseを切り替えて調整できる
• 止めない設定はUX・アクセシビリティとのバランスを見て判断する

オプションの意味さえ分かっていれば、スライダーの止まる・止まらないは自在にコントロールできます。挙動が思いどおりにならないときは、まずこの3つのオプションを確認してみてください。