Swiperでスライドが1枚の場合はスライダーを無効にする【loop:true対応】

Swiperは、watchOverflow: true を設定しておくと、スライドが1枚しかない場合はスライダーが無効になります。
ここまではSwiperのオプションを確認すればわかりますよね。

しかし問題なのが、loop: true が設定されている場合。
loop: true だと、watchOverflow: true が効かないのです…！
というのも、ループの設定をしている場合、Swiperが内部でスライドをループ用に複製してしまうため、本来1枚しかなくても「複数枚ある」と認識されてしまうかららしいです。

何か方法はないかと調べていたところ「スライドが1枚のときはSwiper自体を停止する」という方法を見つけて、実際にその方法も試してみたのですが…私がやりたいこととは合いませんでした。

例えば、前後のスライドを左右に少しだけ見切れるような設定にしているような場合。

• slidesPerViewを1より大きくしている
• centeredSlidesを有効にしている

このようなケースでは、Swiperを停止するとレイアウトが崩れ、画像が横いっぱいにどーんと広がってしまいます。
本来やりたいことは「中央に配置＋左右が少し見切れる」デザインの中央の画像サイズのまま、1枚にしたいのです。

最終的に、JavaScriptで「スライドが1枚の時は loop を無効化（false）にする」ことで、
「1枚の時はループせずサイズも崩れず中央に静止」という挙動を実現できました。

解決方法

スライドの枚数を判定して、loopの設定を動的に切り替えます。
つまり、スライドが1枚の場合はloopがfalseになるからスライドが止まる、という仕組み。

const slideCount = document.querySelectorAll('.swiper-slide').length; //スライドの枚数をカウント
const isLoop = slideCount > 1; //2枚以上だったらtrue、1枚以下だったらfalse

const swiper = new Swiper('.swiper', {
  slidesPerView: 1.15,
  centeredSlides: true,
  loop: isLoop,
  watchOverflow: true,
  autoplay: isLoop ? { delay: 5000 } : false, // 1枚なら自動再生も止める
});