slickスライダーを数秒遅らせてスタートさせる方法

2021.01.19(Tue)

Web制作

前回に続いてまたslick の話し。

JavaScriptでfunctionを”数秒後”に実行させたい時に使う「setTimeout」。

これを使ってjQueryのスライダーを数秒後にスタートさせたいと思います。

$(function(){
    setTimeout(function(){
        ～ここに処理を記載～
    },1000);
});

こんな書き方でjQueryで使用できます。

slickで使用する時、例えば3秒後にslickスライダーをスタートさせたい場合。

$(function() {
    setTimeout(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
        });
    }, 3000);
});

これでオープニングアニメーションなどの時間などに合わせてslickスライダーをスタートできます。