🌠
Swiper の effect: fade でスライドが重なる
はじめに
Swiper というスライダーライブラリでフェードエフェクトを利用した際に、
アクティブ以外のスライドも重なって見えてしまう問題に対応したためメモとしてまとめます。
原因
公式のデモ では background-size: cover; のためとくに問題なく表示されておりますが、
img タグや background-size: contain; などの場合は縦横比が統一されない可能性があるためスライドが重なって見えてしまいます。
解決方法
解決方法は非常に簡単で下記のようにオプションを設定することです。
fadeEffect: { crossFade: true } を設定することでスライドが重ならずにアクティブのスライドのみ表示されます。
{
effect: 'fade',
fadeEffect: {
crossFade: true
},
}
下記 GIF ファイルが挙動のデモです。
左側がデフォルトで右側が fadeEffect: { crossFade: true } を設定した状態です。
おわりに
デフォルトの挙動よりも汎用的と感じたため Stack Overflow に投稿してみました。
最後までお読みいただきありがとうございます。
記事に対するリアクションや情報の誤り、誤字脱字などございましたらコメントや記事を管理しているリポジトリまでお願いいたします。
Discussion