以前、SwiperとCSSを使用し、スライダーの背景画像をズームしながらふわっと切り替えする方法を書きましたが、Swiperのスライダーライブラリでフェードエフェクトを指定している場合、透過している画像を使用した際に下の画像と重なってしまう問題があります。今回は、それを解決するコードを紹介します。
方法は簡単です。下記オプションを追加するだけです。
fadeEffect:
crossFade: true
},実際のSwiperのJavaScriptの書き方ですと、「effect: ‘fade’,」を指定して、その下に書いてください。
$(function() {
const topSlider = new Swiper('.top-slider .swiper-container', {
loop: true,
speed: 800,
effect: 'fade',
fadeEffect: {//ここにオプションを指定します。
crossFade: true
},
});
上記を設定すると、重ならず、スライド画像が入れ替わりでフェードインしてくれます。
重なる問題が起きた際は、ぜひ試してみてください。
