Slickでスライド要素が1枚のときはスライドをしない

Slickスライドを使っている時に、スライドが1枚の時だけレイアウトが崩れたのでその時の対応まとめ。

■ レイアウト概要

PC表示：3カラム表示で4枚目のカードから矢印が出てスライドする

SP表示：1カラム表示で2枚目のカードから矢印が出てスライドする

でも1枚の時は1枚で表示したい（スライド解除したい）

2枚以上入っている場合はレイアウトの崩れはないのですが、1枚になった瞬間崩れました....

崩れた部分

PC表示：横幅が極端に狭くなる
SP表示：左側に隠れていて何も表示されない

調整したこと

1. スライドの枚数を取得する（JS）
2. スライドの枚数が1枚だったら...の分岐を作る（JS）
3. レイアウトの調整をする（css）

今回は.slide-oneというクラスでレイアウトを整え、
スライドが1枚だった時はスライドの親（ulなど）にこのクラスを付与するパターンです。

slide.css

/* pcの表示 */
.slide-one{
  display: block; /*　横幅が極端に崩れるなら、この記述。ここはinlineでもOK */
}

/* spの表示 */
@media (max-width: 768px) {
  .slide-one .slick-track{
    display: inline; /*　ここはinlineじゃないと表示されない */
  }
}

※slickはdisplay:flexだと崩れる場合があるのであまり使わないようにするのがベスト。
※cssは状況に応じて変えてください。あくまでも一例です。

slide.js

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

  // スライドが1枚だったら...
  if(slideLength == 1){
    $('.slideCard').addClass('slide-one');
  }

HTMLはこんな感じ↓

index.html

<ul class="slideCard">
      <li class="slideCard-list">
        <h2 class="slidecard-list__ttl">コンテンツ01</h2>
        <p class="slidecard-list__txt">
          ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
        </p>
        <a href="#" class="slideCard-list__btn">詳細はこちら</a>
      </li>
      <li class="slideCard-list">
        <h2 class="slidecard-list__ttl">コンテンツ02</h2>
        <p class="slidecard-list__txt">
          ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
        </p>
        <a href="#" class="slideCard-list__btn">詳細はこちら</a>
      </li>
      <li class="slideCard-list">
        <h2 class="slidecard-list__ttl">コンテンツ03</h2>
        <p class="slidecard-list__txt">
          ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
        </p>
        <a href="#" class="slideCard-list__btn">詳細はこちら</a>
      </li>
    </ul>

サンプルソースコード

See the Pen Slickのslide要素が1枚のときはスライドしない by aya (@orange2929) on CodePen.

Slick調整は地味に大変...

Slickだけには止まりませんが、簡単に実装できる反面
細かい調整の際に地味に厄介な部分があるのがプラグインやライブラリの宿命なんのかもしれない...🤔