slickスライダーが途中で止まるのを防ぐ方法

2021.01.19(Tue)

Web制作

slickとは

slick は jQuery ベースの、スライダー用プラグインです。
レスポンシブにも対応し、カスタマイズ性も高いので、世界中で利用されているプラグインです。

僕もスライダーの実装にslick をたまに使うのですが、画像をクリックしたりスクロールしたりすると途中でオートスライドが止まってしまうことがよくあります。

そんな時は下記オプションを追加します。

pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false

<script>
    $(function() {
        $('.slick').slick({
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
            fade: true,
            speed: 2000,
            autoplaySpeed: 3000,
            autoplay: true,
            pauseOnFocus: false,
            pauseOnHover: false,
            pauseOnDotsHover: false
        });
    });
</script>

これで途中で止まるのを防げそうです。