長年Swiperを使わせてもらっていますが、人によって実装方法が本当に違いますよね。いつも「へー、そんなやり方があるのか」と。今回はそんなSwiperのよくある実装方法のひとつを紹介します。

WordPressやMovable TypeなどでSwiperを実装する際、表示するスライドの枚数が1枚しかない場合が出てくると思います。せっかくのスライダーですが、1枚だけですとなんの意味もないものになってしまいます。

であれば止めてしまおう、というのが今回の記事タイトルです。止めるというか「動かさない」ですね。

Swiperの公式サイトだとwatchOverflowを使っていますが、ループを使っていると動作しない（？）だったりで使い勝手があまりよろしくなく、そもそもSwiper自身にそのあたりを判別させるのにはパフォーマンス的にどうなの？と思うところがあるので、今回紹介する例ではwatchOverflowは使いません。使いたい場合は公式サイトを見てね。

早速コード例を紹介します。めっちゃシンプルなコードです。もっとシンプルに出来ないかな。

コード例

const slideLength = document.querySelectorAll('.swiper-container .swiper-slide').length

if (slideLength > 1) {
  const swiper = new Swiper('.swiper-container', {
    loop: true,
    speed: 400
  })
}

Swiperのパラメータは適当です。任意のものに差し替えてください。

コード例でやっていることは単純で、querySelectorAllで.swiper-container配下の.swiper-slide要素数を取得して、スライの要素数が2枚以上だったらSwiperクラスを呼び出す仕組みです。これなら1枚だけの場合（0の時も）は不要なSwiperクラスを呼び出さずにすみます。

解説

一応細かく解説します。あんまり解説するところないけど。

// スライドさせる要素数を変数へ代入
const slideLength = document.querySelectorAll('.swiper-container .swiper-slide').length

// 変数の値が2以上なら処理を実行
if (slideLength > 1) {
  // Swiperクラスを変数へ代入
  const swiper = new Swiper('.swiper-container', {
    loop: true,
    speed: 400
  })
}

// あとはお好きなタイミングでSwiperを動かそう

ifの処理内でSwiperのコンテナなどにactiveなどのclassを付与してあげるとオンオフが分かりやすいです。ナビゲーション類の表示/非表示に使えます。

const slideLength = document.querySelectorAll('.swiper-container .swiper-slide').length

if (slideLength > 1) {
  const swiperElm = document.querySelector('.swiper-container')
  swiperElm.classList.add('active')

  const swiper = new Swiper(swiperElm, {
    loop: true
  })
}