slickでautoplay設定をしていたが、スマホで見たときに画像をタッチしながらスクロールしたらautoplayが止まる現象が起きた。そんな時の対策をメモ。
ちなみに今回、スライドアニメーションは「fade」にしていた。
<div class="mv_sp">
<img src="images/mv1_sp.jpg" alt="">
<img src="images/mv2_sp.jpg" alt="">
<img src="images/mv3_sp.jpg" alt="">
</div>
対策1. autoplay止まる系オプションを無効に
何らかのアクションでautoplayが止まるのを有効にしてしまうオプションがある。
とりあえず下記オプション全てをfalseに設定
- pauseOnFocus:フォーカスで一時停止
- pauseOnHover:マウスホバーで一時停止
- pauseOnDotsHover:ドットナビをマウスホバーで一時停止
$('.mv_sp').slick({
arrows: false,
autoplay: true,
autoplaySpeed: 5000,
speed: 1500,
fade: true,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
waitForAnimate: false
});
→ 解決ならず・・・
対策2. タッチ操作イベントにautoplayを動かす処理を追加
・スマホでタッチしながらスクロールする操作は、touchmoveイベントで制御できそうとみる。
・イベントに対してautoplayをスタートするslickPlayメソッドを設定。
$('.mv_sp').on('touchmove', function(event, slick, currentSlide, nextSlide){
$('.mv_sp').slick('slickPlay');
});
→ 無事解決!