Slickスライダーを数秒遅らせてスタートさせる方法【setTimeout】

公開日: 2021.01.19
最終更新日: 2026.07.17

オープニングアニメーションが終わってからスライダーを動かし始めたい——slickを使っていると、こうした「少し遅らせてスタートさせたい」場面が出てきます。

結論から言うと、JavaScriptのsetTimeoutでslickの初期化処理をくるむだけで、指定した秒数だけ遅らせてスライダーを開始できます。この記事では、setTimeoutの基本から、slickへの具体的な組み込み方、実装時の注意点までを解説します。

1 setTimeoutで「数秒後に実行」する
2 slickの初期化を遅らせて開始する
3 使いどころ
4 実装時の注意点
5 より正確に演出と同期させる方法
6 まとめ

setTimeoutで「数秒後に実行」する

setTimeoutは、指定した時間が経過したあとに処理を1回だけ実行するJavaScriptの関数です。第1引数に実行したい処理、第2引数に待ち時間をミリ秒（1000ミリ秒＝1秒）で指定します。

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

上の例では、ページの読み込み後に1秒（1000ミリ秒）待ってから、中の処理が実行されます。この「待ってから実行する」仕組みを、そのままslickの初期化に応用します。

なお、よく似た関数にsetIntervalがありますが、こちらは指定した間隔で処理を繰り返し実行するものです。今回のように「一度だけ遅らせて実行したい」場合はsetTimeoutが適しています。

slickの初期化を遅らせて開始する

たとえば、3秒後にslickスライダーをスタートさせたい場合は、次のように書きます。.slick()の呼び出しごとsetTimeoutで囲み、待ち時間を3000（3秒）に指定するだけです。

$(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);
});

これで、ページ表示から3秒後にスライダーが初期化され、動き始めます。待ち時間の3000を変えれば、開始のタイミングは自由に調整できます。

使いどころ

この手法が活きるのは、ページ表示直後に別の演出を見せたいケースです。たとえば、ローディング画面やオープニングのフェードインアニメーションが終わったタイミングにスライダーの開始を合わせると、演出とスライダーがぶつからず、流れのある見せ方になります。

「まずキャッチコピーを見せてから、おもむろにスライドを動かし始める」といった演出も、開始の遅延で自然に組み立てられます。アニメーションの尺に合わせて待ち時間を設定するのがコツです。

また、ファーストビューの画像やテキストをふわっと表示させてから、そのあとにスライダーの動きを重ねると、情報が一度に押し寄せる印象を避けられます。動き出しをわずかにずらすだけで、ページ全体の第一印象が落ち着いたものになります。

実装時の注意点

注意したいのは、初期化されるまでの間の見た目です。slickは初期化されて初めてスライダーの体裁が整うため、遅延している数秒間は、スライド要素が縦に並んだ「素のHTML」の状態で表示されてしまうことがあります。特にファーストビューにスライダーを置く場合、この一瞬の崩れは目立ちやすいので、対策しておきたいところです。

これを防ぐには、初期状態ではCSSで2枚目以降を隠しておき（たとえば最初のスライドだけ表示する）、初期化後に通常表示へ戻す、といった対応をあわせて行うときれいに見えます。slickは初期化されるとslick-initializedクラスを付与するので、これを目印にCSSを切り替えられます。

/* 初期化前は最初のスライドだけ表示 */
.slick .slick-item:not(:first-child) { display: none; }
.slick.slick-initialized .slick-item { display: block; }

遅延スタートを使うときは、待っている間の表示までセットで設計しておくと安心です。

より正確に演出と同期させる方法

固定の秒数で待つ方法は手軽ですが、オープニングアニメーションの尺を変更するたびに、待ち時間も直す必要があります。アニメーションの終了と正確に合わせたい場合は、setTimeoutの代わりに、アニメーション終了時に発火するanimationend（CSSトランジションならtransitionend）イベントを使う方法もあります。

// オープニング要素のアニメーション終了後にslickを初期化
$('.opening').on('animationend', function () {
    $('.slick').slick({
        autoplay: true,
        autoplaySpeed: 3000
    });
});

この方法なら、アニメーションの長さを変えてもコードを直すことなく、終了と同時にスライダーが動き出します。まずはsetTimeoutで手軽に、タイミングの精度が求められる場面ではイベントで、と使い分けるとよいでしょう。