【Swiper.js】カードの高さを統一する方法

横にスワイプできるスライダー（カルーセル）を作りたいとき、定番なのがSwiper.js です。画像スライダーはもちろん、記事一覧や商品一覧の「カード」を横並びにしてスクロールさせる用途でもよく使われます。

ただ、カード型にすると多くの人が一度はつまずきます。カード内の文章量が違うせいで、スライドごとに高さがバラバラになり、見た目が揃わなくなる問題です。

この記事では、Swiper.jsの基本的な導入方法を押さえたうえで、カードの高さを揃えるための方法を紹介します。

公式サイトのご紹介

公式サイト：https://swiperjs.com/
GitHub：https://github.com/nolimits4web/Swiper

Swiper.jsの導入方法

下記のCDNを読み込むことで実装が可能です。
最新版：https://swiperjs.com/get-started

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>

ベースとなるHTML

<div class="swiper">
<div class="swiper-wrapper">

<div class="swiper-slide">
<article class="card">
<h3 class="card-title">記事タイトル</h3>
<p class="card-text">本文が短いカードです。</p>
<a class="card-link" href="#">続きを読む</a>
</article>
</div>

<div class="swiper-slide">
<article class="card">
<h3 class="card-title">記事タイトル</h3>
<p class="card-text">本文が長いカードです。本文が長いカードです。本文が長いカードです。本文が長いカードです。</p>
<a class="card-link" href="#">続きを読む</a>
</article>
</div>

<div class="swiper-slide">
<article class="card">
<h3 class="card-title">記事タイトル</h3>
<p class="card-text">中くらいの文章量です。</p>
<a class="card-link" href="#">続きを読む</a>
</article>
</div>

</div>

<div class="swiper-pagination"></div>
</div>

ベースとなるJavascript

<script>
new Swiper('.swiper', {
slidesPerView: 1.2,
spaceBetween: 16,
breakpoints: {
768: { slidesPerView: 2.2 },
992: { slidesPerView: 3 },
},
});
</script>

カードの高さをそろえる方法

ベースとなるHTMLとjavascriptを読み込んでもらうとわかりますが、文章量がカードによって違うと、高さがバラバラになり、見た目が悪くなります。

固定値を指定して、高さをそろえることもできますが、文章が変わった際などにCSSを修正する作業が発生し、保守性が悪いです。

下記のCSSで、固定値を指定せずに、高さをそろえてあげることができます。

<style>
.swiper .swiper-slide {
  height: auto;
}
.swiper .swiper-slide .card {
  height: 100%;
}
</style>

・.swiper-slideは中身に合わせて自然に伸びる（height:auto）
・.swiper-slideの中にある.cardは、スライドの高さいっぱいに広がる（height:100%）

このCSSを入れると、各スライド内のカードがスライドの高さいっぱいに伸びるため、カードの高さが揃います。結果として、カード一覧の見た目が整います。

ぜひ参考にしてみてください。