Swiperを使って画像などをクロスフェードで切り替えようとしたとき、loopをtrueにしていると、スライドが1枚しかなくてもクロスフェードエフェクトが発生します。通常のフェードと違ってクロスフェードでは一瞬フワッとなるので、見た目もあまりよろしくないです。

例えばお客さんのほうで画像を登録するようなコンテンツだと、スライド数はこちらでコントロールできないので、何らかの対策が必要です。良さそうな方法がないか模索したのですが、スライドが1枚しかないときにclassを付与する方法が、汎用性も高く使いやすかったので紹介します。

STEP1. スライド数を判定して1枚のときclassを付与する

JavaScriptを使い、スライド数を数えて1つだけだったらclassを付与します。Swiperが初期化されると、スライドが複製されてしまうので、初期化前にスライド数を数えます。

// disable用のclassを付ける
const swiperClass = document.getElementsByClassName('swiper');
for (let i = 0; i < swiperClass.length; i++) {
  const count = swiperClass[i].getElementsByClassName('swiper-slide').length;
  if( count <= 1 ){
    swiperClass[i].classList.add("swiper-disabled");
  }
}

〜 この下にSwiper初期化のコード 〜

上記コードでは、Swiperコンテナごとにswiper-slideの数を数えて、1つ以下だったら「swiper-disabled」というclassを付与しています。とくにSwiperの動作に影響はありません。もちろん、ページ内に複数のSwiperがあっても大丈夫です。

Swiper 6以前を使っている場合、Swiperコンテナのclass名がswiperではなくswiper-containerになりますのでご注意ください。

STEP2. classが付与されたときフェードできなくする

で、swiper-disabledが付与されたSwiperに対してCSSで強制的にエフェクトできないようにすればOKです。

.swiper-disabled .swiper-slide  {
  opacity: 1 !important;
}

はい、できました。

そもそもスライドが1枚のときはSwiperを初期化しない。という手もありますが、まあ、こういうやり方もありますよ、と、いうことで。