【slick.js】スマホでautoplayが止まる現象の対策

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>

対策１. 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');
  });

→ 無事解決！