Webサイト制作でスライダーを実装する時によくお世話になっている「slick」というjQueryプラグイン。

通常であればスライダーなのでスライド要素が複数ある前提なのですが、場合によっては公開時にはスライド要素が1枚しかない時があります。

そんな時、スライダー部分の表示が崩れてしまいます。

そこで、スライド要素が1枚の時はslickスライダーを解除する方法です。

<script>
    $(function() {

        // slickスライダーの設定
        $('.slick').slick({
            //スライドさせる
            autoplay: true,
            autoplaySpeed: 5000,
            centerMode: true,
            centerPadding: "15%",
        });

        // スライドの枚数を取得する
        const slideLength = document.querySelectorAll(".slick").length;

        // スライドが1枚の時にクラス名「slide-one」を追加
        if (slideLength == 1) {
            $(".slick").addClass("slide-one");
        }

        // クラス名「slide-one」がある場合は slickを解除
        $(".slide-one.slick-initialized").slick("unslick");

    });
</script>

IPPEI FUKUTA

名古屋の WEB 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 100 サイト以上。ディレクション、デザイン、コーディング、WORDPRESS 構築まで手掛けます。主にWEB系の情報をお届けします。