Swiperで「Swiper Loop Warning: The number of slides …」エラーが出る原因と対応

なんだか久々のwebのtipsです。

納品後のサイトでスライダーが変な挙動になった、と連絡があったので確認したところ以下のスクリプトエラーが出ていました。

Swiper Loop Warning: The number of slides is not enough for loop mode, it will be disabled and not function properly. You need to add more slides (or make duplicates) or lower the values of slidesPerView and slidesPerGroup parameters

The number of slides is not enough for loop mode。
つまりループモードで機能するにはスライド数が足らない、というエラーですね。

ネットで調べても意外と情報がなかったので、エラーの原因と対応策を備忘録として残しておきます。
ちなみに使用していたバージョンは11.0.5です。

1 エラーの原因
2 対応策
- 2.1 HTML
- 2.2 JS

エラーの原因

エラーが発生する前提・原因は以下の3点。

ループが設定されている（loop: true）
スライダーの表示数が１以上に設定されている（slidesPerView: 3,とか）
スライドの枚数が設定した表示数＋１以下（3枚に設定していたら３枚以下しかない）

例えばスライダー表示数を３枚に指定していて、タグ上のスライドが4枚以下だった場合「ループするのに枚数が足らないからループできないよ！」となるようです。

つまり、ループさせるには「スライド数＋１」の枚数が必要ということです。
利用させていただいている身で何ですが、これくらいライブラリ側で対応してほしいかな…とも思わなくもないような。

今回は公開時には４枚以上あったので正常動作していたけど、運用側で数を減らしたためにエラーが出た、という経緯です。なんという罠。
この仕様は事前に知らないと原因不明のエラーになっちゃいますよね…

対応策

この問題を解消するためスライダーが動く前にスライドの数を数えて、もし足らなければループさせないようにひと手間加えました。
具体的にはloopパラメータのフラグを変数に置き換え、その変数をスライド数で分岐させて可変させるようにします。

尚サンプルコードはスマホは１枚、タブレット以降は３枚という前提で書いてます。
おそらくこういう使い方が多いんじゃないのかなと。

HTML

<div class="js-slider">
  <ul class="swiper-wrapper">
    <li class="swiper-slide"><img src="img-01.jpg" alt=""></li>
    <li class="swiper-slide"><img src="img-02.jpg" alt=""></li>
    <li class="swiper-slide"><img src="img-03.jpg" alt=""></li>
  </ul>
</div>

JS

// ブラウザ幅768px（PC）以上のスライダー表示数を変数に代入
const pcPreview = 3 

//スライダーの数をカウント
let slideCount = document.querySelectorAll('.js-slider li').length

// loopパラメータのフラグを変数に代入（表示数+1以上ならtrue、以下ならfalseを返す）
let loopFlagPc = (slideCount >= (pcPreview + 1))

Let slider = new Swiper('.js-slider', {
  slidesPerView: 1,   // スマホ時の表示数は1
  loop: true,   // スマホ時は1枚だからtrue固定 
 
  ...
  その他のパラメータ
  ...

  breakpoints: {
    768: {   // ブラウザ幅768px以上の設定
      slidesPerView: pcPreview,   //  スライダー数を変数で指定
      loop: loopFlagPc,   // スライド数で分岐した結果でtrue/falseを変える
    }
  }
});

スライダー実行前にあらかじめスライド数を計算した上でループさせるか、させないかのフラグを立てることで、スライダーのパラメータを可変させて対応します。

あとついでにブレークポイント以降のスライド数も変数にしています。
実数で分岐させても良いのですが、こちらのほうがメンテナンスしやすいでしょう。