Webサイト制作でスライダーを実装する際によくお世話になる、jQueryプラグインの「slick」。ただ、スライダーは複数のスライドがある前提の仕組みのため、公開時にスライド要素が1枚しかないと、中央寄せの余白やクローン表示などが噛み合わず、レイアウトが崩れてしまうことがあります。

結論から言うと、スライドの枚数を数え、1枚のときだけslickを解除（unslick）することで、この崩れを防げます。この記事では、崩れが起きる理由から、判定して解除する具体的なコード、そしてWordPressなど動的サイトでの活用場面までを解説します。

スライドが1枚だとレイアウトが崩れる理由

slickは、複数のスライドを並べて動かすことを前提に設計されています。centerModeやcenterPaddingで中央のスライドを強調する設定にしていると、その前後にスライドがあることを想定して余白（パディング）が確保されます。

ところがスライドが1枚しかないと、両隣に並ぶはずのスライドが存在しないため、確保された余白だけが残って中身が中途半端に寄ってしまう、といった崩れが起こります。特に、投稿数や登録件数に応じてスライド枚数が変動するサイトでは、たまたま1件になったときにこの問題が表面化しがちです。

スライド枚数を数えてslickを解除する

まず、スライダーのHTML構造は次のような形を想定します。slick-itemがスライド1枚ぶんです。

<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>

この構造に対して、次のJavaScriptで「スライドが1枚のときだけ解除する」処理を加えます。

<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>

コードのポイント

処理は3ステップに分かれています。

まずdocument.querySelectorAll(".slick-item").lengthで、スライド要素の数を数えます。次に、その数が1だったときだけ、目印として.slickにslide-oneというクラスを付与します。最後に、slide-oneが付いていて、かつslickが初期化済み（slick-initializedクラスが付いている）要素に対して、slick("unslick")で解除しています。

ポイントは、解除の対象に.slick-initializedを含めている点です。unslickは初期化済みのslickにしか使えないため、このクラスを条件に加えることで、初期化されていない状態で解除しようとしてエラーになるのを防いでいます。いったんslickを初期化してから、1枚のときだけ解除する、という流れになっているわけです。

補足すると、unslickはslickが付与したマークアップやクラスをすべて取り除き、元のHTMLの状態へ戻すメソッドです。そのため解除後は、スライダーとしてのスタイルも外れます。1枚だけをきれいに見せたい場合は、目印にしたslide-oneクラスに対して通常表示用のCSS（中央寄せや余白の調整など）を用意しておくと、解除後の見た目まで整えられます。

動的サイトで役立つ場面

この対処が特に効いてくるのが、WordPressのように表示件数が変動するサイトです。新着情報やお客様の声、実績などをスライダーで見せる場合、公開直後や更新の谷間で登録が1件だけ、という状況は実際によく起こります。

枚数に応じて自動でスライダーを解除する仕組みを入れておけば、コンテンツが1件でも複数件でも表示が破綻しません。件数が読めない箇所にスライダーを使うときの保険として、あらかじめ組み込んでおくと安心です。

なお、そもそもスライドが1枚のときは最初からslickを初期化しない、という書き方でも同じ結果が得られます。if (slideLength > 1)で初期化そのものを条件分岐させる方法です。今回のように「一度初期化してから解除する」方式は、レスポンシブで表示枚数の見え方が変わる場合などにも応用しやすいのが利点です。案件の要件に合わせて、書きやすいほうを選ぶとよいでしょう。

まとめ

• slickはスライド複数枚が前提のため、1枚だと中央寄せの余白などでレイアウトが崩れる
• スライド数を数え、1枚のときだけslick("unslick")で解除すれば崩れを防げる
• 解除は.slick-initializedを条件に加え、初期化済みの状態に対して行う
• 表示件数が変動するWordPressなどの動的サイトで特に有効

スライダーは「複数枚あって当たり前」と考えてしまいがちですが、実際の運用では1枚だけになる瞬間があります。枚数の変動まで見越して組んでおくと、公開後のトラブルをひとつ減らせます。