【jQuery】slickのautoplayが動かない原因、追加コードで直るかも?って話

JS/jQuery

そもそもslickを設置できてるか?の確認

こちらの記事などを参照にslickを置けているか、chromeの「検証」や「ディベロッパーツール」などでエラーが出ていないか確認してください。エラー表示があればそもそも設置の段階で何かしらのミスがあると思うので、ひとつひとう確認していきましょう。

次にエラーは出ていないが、スライドがたまに止まる。動いたり動かなかったりする場合の対処法を紹介します。

エラーはないがたまに止まる場合の対処法(3行でなおるかも?)

$('.slider-1').slick({
  autoplay: true,
  dots: false, 
  arrows:false, 
  slidesToShow:2, 
  autoplaySpeed:2000,
  speed:500,
  // ここまではスライダーの設定

  // 今回追加するコード
  pauseOnFocus: false,
  pauseOnHover: false,
  pauseOnDotsHover: false,
});

下3行を追加すれば直るかも??っていう追加のコードです。フォーカスやホバー時に止まる設定をfalseで無効にするイメージです。

まとめ

今回はslickのautoplay、自動再生が止まってしまう場合の解決法を紹介する記事でした。

上で紹介しているコードは公式のオプションなんですが、逆に上のコードをtrueにしてもslickのautoplayはなかなか止まらないんですよね、、ホバーで即停止するスライドショーを求められた場合は別のものを使っています。こちらの記事も書きますのでお待ちください。

私が仕事中これで直ったことが何度かあります。ご参考程度に、、

タイトルとURLをコピーしました