SP版でautoplayが上手く動かなければ「pointer-events:none;」を試してみよう！
サイト内でスライダーを簡単に導入できるjQueryプラグイン「slick.js」、実際にお世話になるコーダーさんも多いでしょう。
slick.jsではさまざまなカスタマイズが可能で、自動スライドなんてものはお手軽に実装可能です。
しかしこの自動スライド(autoplay)を実装した際、検証ツールでSP版、またはスマホ実機で確認した時に挙動がおかしくなった経験はありませんか。
特に「次の画像に進むはずの時間になっても動かずに止まってしまう」という現象がよく見られます。
私の場合は画像1枚1枚が表示されている間、その下に画像の残り表示時間を示す簡易的なプログレスバーを付けていたものの、この現象が起こるとプログレスバーは止まるどころか反対方向に動き出す始末。もちろんそんな想定では作っていません。
この自動スライドの挙動不備を回避する解決策が一応あるので共有しておきます。
スライド要素をクリック・タッチ無効にする
この現象について明確な対処法は調べても出てきませんが、どうやらスマホ操作時のポインタの挙動が影響しているそう。
そのため、スライダー部分の要素に以下のCSSを当ててあげましょう。
pointer-events: none;このCSSは、対象要素のクリック・タッチをすべて無効化する役割があります。
スライド画像をユーザー自前のフリックで動かせなくはなりますが、その仕様で問題のないサイトであれば迷わず導入してよいCSSだと思います。