【CSS】slick.jsでautoplayが止まる現象の対策案

slick.jsでスライドを滑らかに動かすオプション

「slick.js」には様々なオプションがあり、スライダーを作る上でとても便利ですが、
「autoplayを使うとスマホスクロール時に停止する」という現象は、よく遭遇する問題として挙げられます。
公式のオプションとして、「ホバー時にautoplayが止まらないようにする」というものが存在しますが、スマホでは効かない場合があり、困ったものです。
下記コードを追加して解決する場合もありますので、試してみてください。

pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,

touchmove時にslickを再起動する設定を追記する

touchmoveイベント時にslickをスタートする設定を追記する方法で動かしてみましょう。

$('.slide_target').on('touchmove', function(event, slick, currentSlide, nextSlide){
$('.slide_target').slick('slickPlay');
});

上記方法で停止問題は解決しますが、スライド中は停止したり、touchmoveが重複して何回もスタートし直したりして重くなったりと、まだスッキリ完全解決とは言い切れない状態です。

要件によってはCSSの「pointer-events」で解決できる

もしスライダーがバナー等のリンクが必要ないのであれば、こちらの方法が一番キレイに解決できるはずです。
ぜひお試しください。

.slide_target {
  pointer-events: none;
}