「Swiper.js」で作るスライドショーのスライドの高さを揃える方法をご紹介。
この方法を使わない場合はどうなるか?
swiper-slide内のコンテンツ量によって高さがバラバラになってしまうのです。
見た目的に高さが揃っていないとかっこ悪いし、「デザインと違います!」とデザイナーさんに怒られてしまうかもしれません。
でも安心してください、解決法は案外簡単なので!
まず、swiper-slideにheight:autoをつけて、
swiper
.swiper-slide{ height: auto; }
次にその子要素にheight:100%を指定すればOKです!!
swiper
.Box{ height: 100%; }
HTMLはこんな感じです!
swiper
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><div class="Box">中身</div></div>
<div class="swiper-slide"><div class="Box">中身</div></div>
<div class="swiper-slide"><div class="Box">中身</div></div>
</div>
</div>
次はこの記事!






