【Swiper.js】スライドの高さを揃える方法

swiper.jsはとても便利だ。しかし、高さが違う画像などをスライダーにせってした時に高さがバラバラになってしまう。

それをCSSのみで解決できるので、今回はその方法を紹介する。.swiper-slideにheight: auto;を設定し、その小要素（今回は画像）に対してheight: 100%;を指定するだけでOKだ。

<style>
.swiper-slide {
  height: auto;
}
.swiper-slide img {
  height: 100%;
}
</style>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="item01.jpg"></div>
    <div class="swiper-slide"><img src="item02.jpg"></div>
    <div class="swiper-slide"><img src="item03.jpg"></div>
  </div>
</div>

(Visited 106 times, 1 visits today)

関連記事: