【Swiperでfadeが効かない】画像が重なる問題について

スライダー系ライブラリはswiperを使用しています。

今回、fadeオプションを指定したら画像が重なってしまう、という問題でハマりました。

ググっても全然出てこなかったので残しておきます。

今回の問題は、下記の条件を満たした時に発生するもの。
swiperオプションでeffect: "fade"を指定
スライド画像に、背景が透過されている画像を使用する

なので、背景色ありの画像を使用したり、effect: "fade"を設定しなければ、この問題は起こりません。

こういうパターンの実装はあまりないかもしれないです。

解決したコード。

var swiper = new Swiper('.swiper-container', {
	loop: true,
	autoplay: {
		delay: 3000,
	},
	speed: 1000,
	effect: "fade",
	/* これが必要 */
	fadeEffect: { 
		crossFade: true
	},
});

effect: "fade"指定に加えて、fadeEffectにcrossFade: trueを一緒に指定すること。

この設定を入れることにより、
スライド画像を入れ替わりでフェードインさせることができます。