2023年3月アーカイブ

画像が自動で切り替わるだけ(操作なし)のスライドショーをslick.jsで実装したのですが、スマホでページをスクロールしたときに「スライドショー上で指を離すとslickの自動再生が止まってしまう」という現象がおきました。
スライドショー外をタップするとまた動き始めます。

動作的に以下のオプションが効いてしまっているような感じです。
(どちらもfalseに設定しており、PCではちゃんと効いています)

pauseOnHover : マウスが乗ったりときに自動再生を止める
pauseOnFocus : フォーカスされたときに自動再生を止める

●回避方法
スライドショーに対して以下のCSSを設定したところ回避することができました。

pointer-events: none;

ただし、上記はクリックやタップを無効にするスタイルなので
スライドショー画像にリンクをつけたい場合は使えないかと思います。

このアーカイブについて

このページには、2023年3月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2023年1月です。

次のアーカイブは2023年10月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。