3つ並んだスライドを実装する方法【Swiper.js】

この記事の前提条件

対象: Swiper.js(2026年時点の最新版)
難易度: ★★☆
所要時間: 約15分

商品一覧やお客様の声を、3件ずつ並べてスライドさせるコンテンツ、よく見かけますよね。この手のスライダーを自作するなら、今は「Swiper.js」を使うのが定番です。jQueryに依存せず動作し、今も活発に開発が続いている数少ないスライダーライブラリの1つです。

目次非表示

CDNを読み込むだけで導入できる
HTML: 決まった構造のクラス名で組む
JavaScript: 3件ずつ表示する設定
スマホでは1件ずつに切り替える(レスポンシブ設定)
まとめ

目次へ

CDNを読み込むだけで導入できる

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/14.2.0/swiper-bundle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/14.2.0/swiper-bundle.min.js"></script>

HTML: 決まった構造のクラス名で組む

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">コンテンツ1</div>
    <div class="swiper-slide">コンテンツ2</div>
    <div class="swiper-slide">コンテンツ3</div>
  </div>
  <div class="swiper-pagination"></div>
</div>

swiper-wrapperとswiper-slideは、Swiper側で意味を持つ決まったクラス名です。自由に変更はできないので、そのまま使います。

JavaScript: 3件ずつ表示する設定

new Swiper('.swiper', {
  slidesPerView: 3,   // 1画面に表示する枚数
  spaceBetween: 20,   // スライド同士の間隔(px)
  pagination: {
    el: '.swiper-pagination',
  },
});

slidesPerViewを3にするだけで「3つ並んだスライド」が実現できます。ドラッグ・スワイプでの操作、ページネーション(下部の丸いインジケーター)まで、細かいJavaScriptを自分で書く必要はありません。

スマホでは1件ずつに切り替える(レスポンシブ設定)

PCでは3件、スマホでは1件、といった画面幅ごとの調整はbreakpointsで指定します。

new Swiper('.swiper', {
  slidesPerView: 1,
  spaceBetween: 16,
  breakpoints: {
    768: {
      slidesPerView: 3,
      spaceBetween: 20,
    },
  },
});

基本の設定(この例ではスマホ向けの1件表示)を先に書き、breakpointsでその画面幅「以上」になった時の上書き設定を追加する、という書き方になります。

⚠️ 画像の高さが揃わない時はCSSで調整する

投稿ごとに画像の縦横比が違うと、並んだスライドの高さがガタガタになりがちです。これはSwiper自体の問題ではなく、各スライド内の画像にobject-fit: cover;と固定のheightを指定してあげることで解決します。ライブラリの設定だけでなく、CSS側の調整とセットで考えるのがポイントです。