スライダー系ライブラリは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を一緒に指定すること。
この設定を入れることにより、
スライド画像を入れ替わりでフェードインさせることができます。