スライダーライブラリSwiperのフェードエフェクトで透過PNGなどで構成されたスライドを切り替える際、iPhoneやiPadなどiOSのsafariだと、fadeEffect: { crossFade: true }をオプションで指定しても画像が重なってしまう現象が起きてしまいます。
解決方法
fadeEffectオプションのtransformElにフェードさせたい要素を指定します。これを指定することにより、スライド自体がフェードするのではなく、その中に含まれる指定した要素がフェードするようになります。具体的にはimgタグやその囲んでいるブロックなどを指定します。
![](https://blog.shipweb.jp/wp-content/uploads/2022/10/ブタの貯金箱の線画アイコン.png)
![](https://blog.shipweb.jp/wp-content/uploads/2022/10/ショートケーキアイコン.png)
![](https://blog.shipweb.jp/wp-content/uploads/2022/10/トラックのフリーアイコン.png)
この3つの透過PNGを使ったSwiperのサンプルです。
transformElなし(iOSのsafariでみると、ループ2週目で画像が重なります)
fadeEffect: {
crossFade: true
}
transformElあり(iOSのsafariでみても画像が重なりません)
fadeEffect: {
crossFade: true,
transformEl: 'img',
}
Comments