slickスライダーでスライドが1枚の時はスライダーを解除

追記・修正して2024年4月26日に再度公開しました。

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

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

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

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

<ul class="slick">
    <li class="slick-item">
        <img src="images/slide-1.jpg" alt="">
    </li>
    <li class="slick-item">
        <img src="images/slide-2.jpg" alt="">
    </li>
    <li class="slick-item">
        <img src="images/slide-3.jpg" alt="">
    </li>
</ul>

<script>
    $(function() {

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

        // スライドの枚数を取得する
        const slideLength = document.querySelectorAll(".slick-item").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サイト制作実績 120 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。Web制作に関わる情報やワーケーション日記などを執筆しています。