【実務直結】Swiper.jsの使い方！コピペで動く最小構成とよく使うカスタマイズ解説

実装サンプル

See the Pen Swiper by 広瀬和哉 (@lpvcfdes-the-styleful) on CodePen.

1. Swiper.jsの導入（CDN版）

<!-- headタグ内にCSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />

<!-- body閉じタグ直前にJS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>

2. HTMLの基本構造（コピペ用）

<!-- メインコンテナ -->
<div class="swiper my-slider">
  <!-- スライドを包む要素 -->
  <div class="swiper-wrapper">
    <!-- 各スライド -->
    <div class="swiper-slide"><img src="img01.jpg" alt="Slide 1"></div>
    <div class="swiper-slide"><img src="img02.jpg" alt="Slide 2"></div>
    <div class="swiper-slide"><img src="img03.jpg" alt="Slide 3"></div>
  </div>
  
  <!-- 必要に応じて追加（ページネーション・前後ボタン） -->
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

3. JavaScriptの設定（実務向けテンプレート）

const swiper = new Swiper('.my-slider', {
  loop: true, // 最後までいったら最初に戻る
  speed: 1000, // 切り替えのアニメーション速度
  
  autoplay: {
    delay: 3000, // 3秒ごとにスライド
    disableOnInteraction: false, // ユーザーが操作しても自動再生を止めない
  },

  // ページネーション（下の点々）
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },

  // 前後ナビボタン
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // 【重要】レスポンシブ設定
  breakpoints: {
    // 768px以上（タブレット・PC）
    768: {
      slidesPerView: 2, // 2枚表示
      spaceBetween: 20, // 余白20px
    },
    // 1024px以上（PC）
    1024: {
      slidesPerView: 3, // 3枚表示
      spaceBetween: 30, // 余白30px
    }
  }
});

制作現場でハマらないためのポイント

.swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: cover; /* 画像の比率を保ったまま領域を埋める */
}