Swiperの使い方・導入方法からカスタマイズ例を紹介

スライダープラグインで人気のあるSwiperの使い方について紹介します。
初めての方でも分かりやすいように、Swiperの導入方法や、よく使うスライダーのサンプルを複数ご紹介します。

Swiperライブラリの導入方法

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

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

Swiperを使うにはCDN（ファイルをダウンロードする必要がない）が便利です。
上記のCSS・JSファイルを読み込みましょう。

最新のCDNはこちらから参照ください。

基本的なHTMLのコードについて

<!-- スライダーメインコンテナ -->
<div class="swiper">
  <!-- スライドを包む領域 -->
  <div class="swiper-wrapper">
    <!-- スライド要素 -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>

  <!-- ページネーションが必要な場合 -->
  <div class="swiper-pagination"></div>

  <!-- ナビゲーションボタンが必要な場合 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- スクロールバーが必要な場合 -->
  <div class="swiper-scrollbar"></div>
</div>

上記のようにHTMLを記述します。
ページネーション、ナビゲーションボタン、スクロールバーは必要なければ記述不要です。
それでは使用例をご紹介します。

サンプル「ページネーション付きスライダー」

var swiper = new Swiper(".swiper", {
  loop: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
});

パラメータ	説明
el	ページネーションのHTML要素を指定
clickable	trueにするとページネーションボタンがクリック可能になる

サンプル「ナビゲーションボタン付きスライダー」

var swiper = new Swiper(".swiper", {
  loop: true,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

パラメータ	説明
nextEl	次へボタンのHTML要素を指定
prevEl	前へボタンのHTML要素を指定

サンプル「スクロールバー付きスライダー」

var swiper = new Swiper(".swiper", {
  loop: true,
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
  },
});

パラメータ	説明
el	スクロールバーのHTML要素を指定
draggable	trueにするとスクロールバーがドラッグ可能になる

まとめ

Swiperの使い方について紹介しました。
スライダーのサンプルのバリエーションや、カスタマイズ方法は随時更新していきますので、よろしければ参考にしてみてください。