対策記事が見つからない・・・
どういうことか
swiper.jsでスライドを作ったページを読み込んだとき、jsが反映されるまでの一瞬に画像（スライド）が縦並びになる。原寸大になる。つまり一瞬ページが伸びる。よろしくないのでどうしようねという話。
対策：202306追記
多分こっちのほうが早い。
仕様として、これで作ったものが
<div class="swiper">swiper.jsが発火するとこうなる
<div class="swiper swiper-initialized swiper-horizontal">付与されるclassの内訳はoptionによりけりな部分もあるだろうけどおいておいて、ということは、classの有無でやっていける
.swiper{ display: none;}
.swiper.swiper-initialized{ display: block;}発火したタイミングでスライドが表示されるので結局ずれ込むんだけどね。deferとかで非同期にすれば評価的に怒られない？どうでしょう。
サイズを指定できない組み方を作ってる場合はどうしても格好悪くなる。根本的な対策が必要。
class付与のタイミングでjsでslideDownさせちゃえばと思ったけど、後付が過ぎてスマートじゃないんで何か間違ってる気がしてくる。でもなあ。発火しないから望まない形に表示されてるだけだもんね。発火するまでどう繋ぐかだもんね。
対策
領域の高さに影響するからopacityで非表示にしても意味がない。親の領域をぶち抜かないようにする。だから、スライドの高さを指定しなきゃいけないっていう前提が発生する。
とりあえず、HTMLでこうしたとする。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href=""><div class="img"><picture><source srcset="https://placehold.jp/1000x1000.png?text=sp" media="(max-width: 896px)"><img src="https://placehold.jp/2000x1000.png?text=pc" alt=""></picture></a></div>
<div class="swiper-slide"><a href=""><div class="img"><picture><source srcset="https://placehold.jp/1000x1000.png?text=sp" media="(max-width: 896px)"><img src="https://placehold.jp/2000x1000.png?text=pc" alt=""></picture></a></div>
<div class="swiper-slide"><a href=""><div class="img"><picture><source srcset="https://placehold.jp/1000x1000.png?text=sp" media="(max-width: 896px)"><img src="https://placehold.jp/2000x1000.png?text=pc" alt=""></picture></a></div>
<div class="swiper-slide"><a href=""><div class="img"><picture><source srcset="https://placehold.jp/1000x1000.png?text=sp" media="(max-width: 896px)"><img src="https://placehold.jp/2000x1000.png?text=pc" alt=""></picture></a></div>
</div>
</div>swiperを読み込んで有効化する。
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script>
const swiperTopimg = new Swiper('.swiper', {
loop: true,
speed: 1000,
slidesPerView: 1,
effect: 'fade',
autoplay: {
delay: 10000,
disableOnInteraction: false,
},
});
</script>ここから。
.swiper-slide自体を非表示にするとスライドが崩壊するのでNG。縦並びになる際、横幅は領域をぶち抜かないっぽいんで高さだけうまいこと調整する。
.swiper-wrapper{
overflow: hidden;
height: 720px;
}
.swiper-slide .img{
height: 720px;
}
.swiper-slide .img img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}overflowで削る。2箇所書いてあるheightは任意の数値を入れる。vhだろうがなんだろうが構わないんで、完成形と同じ領域を指定する。.swiper-navigationをスライドの外側に逃がす場合を考えると.swiperよりは.swiper-wrapに付与するのが管理が楽かなと。
object-fitは自分の最近の安牌なんで、そんな物使わないとか、backgroundで指定するとか、場合によって変わってくる。
画像ありきのブラウザ幅に合わせたレスポンシブ構成だとちょっとめんどくなる。
こうして
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><picture><img src="https://placehold.jp/1600x900.png" alt=""></picture></div>
<div class="swiper-slide"><picture><img src="https://placehold.jp/1600x900.png" alt=""></picture></div>
<div class="swiper-slide"><picture><img src="https://placehold.jp/1600x900.png" alt=""></picture></div>
<div class="swiper-slide"><picture><img src="https://placehold.jp/1600x900.png" alt=""></picture></div>
<div class="swiper-slide"><picture><img src="https://placehold.jp/1600x900.png" alt=""></picture></div>
<div class="swiper-slide"><picture><img src="https://placehold.jp/1600x900.png" alt=""></picture></div>
</div>
</div>こうする。
.swiper{
width: 100%;
height: 0;
padding-top: 56.25%; //16:9
position: relative;
}
.swiper-wrapper{
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.swiper-slide img{
width: 100%;
height: auto;
}画像の縦横比をスライドに反映させる。上の例は16:9。縦横で上手く割り切れないとめんどくさいことになる。
こっちもやっぱりoverflowで削る。
作ったはいいけど
そのままの状態だとそもそもページに干渉する点、ファーストビューに設置したらすごくダサくなる点、回避しないとダメでしょって感じなんだけど、ここまで泥臭いDIYは、はたして正解なのか。もっとスマートな方法があるんじゃないかと疑いたくなる。どうなんでしょうね。
軽く調べたところでは、何故かslickがバンバン検索結果に上がってきて話にならなかったのと、作例は無くはないけどなんかよく分かんなかったりうまくなかったり、微妙だった。調べきる前に作ろうとしたのはいいことなのか悪いことなのか。とりあえずはこれでなんとかなるっちゃなるってことでひとつ。
本家は普通に表示できてるんで、まともな人はまずここを掘り下げてやっていくのがいいです。
コメント