以前、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
},
});
上記を設定すると、重ならず、スライド画像が入れ替わりでフェードインしてくれます。
重なる問題が起きた際は、ぜひ試してみてください。
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。
