さっきのことなんですが、Swiperでスライダーを組んだ時に、ページが読み込まれる瞬間にスライダーの外枠が「ブルン！」と一瞬大きくなって、すぐに元のサイズに戻る現象に遭遇しまして。
ググって調べたらあるあるな現象らしく、今回は原因を突き止めて解決できたので、熱が冷めないうちにメモ代わりにサッと書いておこうと思います。同じ現象で悩んでいる方もいるかもしれないので、ぜひ読んでみてください。
結論：犯人はswiper-slideのheight: 100%;だった
もういきなり結論から。この「ブルン！」現象の真犯人は、各スライドを囲むクラスswiper-slideにデフォルトで適用されているheight: 100%;というスタイルでした。
1. なぜ起こる？height: 100%;が引き起こす予期せぬ挙動
私の場合、画像を1枚1枚表示するタイプのSwiperで、読み込んだ瞬間に横長の画像に合わせてスライダーの縦幅がぐんっと伸びて、一瞬だけ正方形になる現象でした。
この「ブルン！」現象の根本原因を探るべく、開発者ツールとにらめっこしながら挙動を追ってみました。ページを何度も読み込み直して、すぐにマウスカーソルでスライダー部分をハイライト表示させながら一瞬一瞬を何度も確認してると、どうやら問題はswiper-slideというクラスに潜んでいることが見えてきたんです。
通常、swiper-slideには、その親要素の高さに対してheight: 100%;というスタイルが適用されていますよね。これは、スライド要素が親の高さにぴったり収まるようにするための設定です。しかし、問題は、画像などのコンテンツがまだ完全に読み込まれていない、つまり親要素の「本当の高さ」が確定していない状態で、このheight: 100%;が先に評価されてしまう点にありました。これが、今回私が突き止めた「ブルン！」の正体でした。
2. CSS一行で安定させる方法
原因がわかれば、解決策は意外なほどシンプル。親要素の読み込み状況に依存しないpxやvhで高さ指定をしてあげることです。私の場合、swiperを表示させているヒーローエリアをvhで指定してたので、その値をswiper-slideに直接適用することで問題が解決しました。
具体的には、以下のような感じです。
CSS
.slider1_swiper-slide {
height: 〇〇vh !important; /* あなたのスライダーに最適なvhやpxの値を入れます */
}
※swiperを同ページに３つ使用してたので、slider1_swiper-slideとしてます、クラス名はお好きなように。
例えば、スライダーの高さがビューポートの70%になるようにしたい場合は、height: 70vh !important;と記述します。!importantは忘れずに。
まとめ
- Swiperのスライダーが読み込み時に「ブルン！」となるのは、
swiper-slideのheight: 100%;が原因。 - コンテンツが読み込まれる前に、一時的に不正確な高さが計算されてしまうため起こる。
- 解決策は、
vhやpxなどを使った高さ指定を!importantでswiper-slideに適用すること。
このメモが、もし同じ問題で悩んでいる方がいたら、その方の解決のヒントになれば嬉しいです。
