[2024年最新] スライダーswiperの使い方

今回は、Web開発者に人気のスライダープラグイン「Swiper」について解説します。Swiperの概要から基本的な使い方や実装例、よく使うオプション一覧などを紹介している記事です。

1 Swiperライブラリの読み込み
- 1.1 CDNで読み込む方法
- 1.2 相対パスでライブラリを読み込む方法
2 基本的なHTML構造
3 Swiperを使用した色々な実装デモ
4 Swiperオプション一覧表
5 まとめ

Swiperライブラリの読み込み

CDNで読み込む方法

swiper公式サイトから、最新のCDNを読み込みます。（CSSとJSどちらも読み込みが必要です）

CDNは基本的には<head>タグ内に記述します。

2024年5月時点でのswiper最新CDNは下記です。

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

相対パスでライブラリを読み込む方法

①上記CDNページからファイルをダウンロードします

②ダウンロードファイルを<head>タグ内で読み込ませます。（読み込みパスは、環境に合わせて変更ししてください）

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

基本的なHTML構造

swiperスライドを実装するシンプルな構成は下記のコードです。

<div class="swiper">
  <!-- スライダー全体を包む要素 -->
  <div class="swiper-wrapper">
    <!-- 各スライドを表す要素 -->
    <div class="swiper-slide">Slide 1</div> <!-- 1枚目のスライド -->
    <div class="swiper-slide">Slide 2</div> <!-- 2枚目のスライド -->
    <div class="swiper-slide">Slide 3</div> <!-- 3枚目のスライド -->
  </div>

  <!-- ページネーション（スライドの位置を示すインジケーター） -->
  <div class="swiper-pagination"></div>

  <!-- 次のスライドに進むためのボタン -->
  <div class="swiper-button-next"></div>

  <!-- 前のスライドに戻るためのボタン -->
  <div class="swiper-button-prev"></div>
</div>

var swiper = new Swiper('.swiper', {
  // スライダーが無限ループするように設定
  loop: true,

  // ページネーション（スライドの位置を示すインジケーター）を設定
  pagination: {
    el: '.swiper-pagination', // ページネーションを表示する要素を指定
    clickable: true,          // ページネーションをクリックしてスライドを切り替えることができるようにする
  },

  // ナビゲーションボタンを設定
  navigation: {
    nextEl: '.swiper-button-next', // 「次へ」ボタンを指定
    prevEl: '.swiper-button-prev', // 「前へ」ボタンを指定
  },
});

Swiperを使用した色々な実装デモ

レスポンシブスライダーの作成

画面幅に応じて、swiperオプションを設定することができます。

var swiper = new Swiper('.swiper-container', {
  // レスポンシブデザインの設定（画面サイズに応じたスライド表示を制御）
  breakpoints: {
    // 画面幅が640ピクセル以上の場合の設定
    640: {
      slidesPerView: 1,    // 1つのスライドを表示
      spaceBetween: 10,    // スライド間の余白を10ピクセルに設定
    },
    // 画面幅が768ピクセル以上の場合の設定
    768: {
      slidesPerView: 2,    // 2つのスライドを表示
      spaceBetween: 20,    // スライド間の余白を20ピクセルに設定
    },
    // 画面幅が1024ピクセル以上の場合の設定
    1024: {
      slidesPerView: 3,    // 3つのスライドを表示
      spaceBetween: 30,    // スライド間の余白を30ピクセルに設定
    },
  }
});

カスタムナビゲーションボタン

独自のデザインを適用したナビゲーションボタンの設定例を紹介します。

<!-- 次のスライドに進むためのボタン -->
<div class="swiper-button-next"></div>

<!-- 前のスライドに戻るためのボタン -->
<div class="swiper-button-prev"></div>

<script>
  var swiper = new Swiper('.swiper-container', {
    // ナビゲーションボタンの設定
    navigation: {
      // 「次へ」ボタンの要素を指定
      nextEl: '.swiper-button-next',
      // 「前へ」ボタンの要素を指定
      prevEl: '.swiper-button-prev',
    },
  });
</script>

サムネイル付きスライダー

メインスライダーとサムネイルスライダーをリンクさせた例を紹介します。

// サムネイル用のスライダーを初期化
var galleryThumbs = new Swiper('.gallery-thumbs', {
  slidesPerView: 4,           // 一度に表示するスライド数を4に設定
  freeMode: true,             // スライドを自由にスワイプできるモードを有効化
  watchSlidesVisibility: true, // スライドの表示状態を監視する
  watchSlidesProgress: true,   // スライドの進行状況を監視する
});

// メインギャラリースライダーを初期化
var galleryTop = new Swiper('.gallery-top', {
  spaceBetween: 10,           // スライド間のスペースを10ピクセルに設定
  thumbs: {                   // サムネイルとの関連設定
    swiper: galleryThumbs,    // サムネイルスライダーを指定
  },
});

自動再生（オートプレイ）とループ機能

スライダーの自動再生機能の設定例を紹介します。

var swiper = new Swiper('.swiper-container', {
  // スライダーが無限ループするように設定
  loop: true,

  // 自動再生設定
  autoplay: {
    delay: 2500,                // スライドが切り替わるまでの遅延時間を2500ミリ秒（2.5秒）に設定
    disableOnInteraction: false, // ユーザーの操作後も自動再生を続ける
  },
});

Swiperオプション一覧表

よく使うswiperオプションを抜粋してみました。

全オプションを確認されたい方は、swiper公式サイトをご参考いただけると幸いです。

オプション	説明	デフォルト値	設定例
initialSlide	初期スライドのインデックス	0	`initialSlide: 1`
`direction`	スライドの方向	horizontal	`direction: 'vertical'`
`speed`	スライドのトランジションスピード（ミリ秒）	300	`speed: 500`
autoplay	自動再生機能の設定	false	autoplay: { delay: 2500, disableOnInteraction: false }
loop	スライダーのループ機能を有効にする	false	`loop: true`
pagination	ページネーションの設定	null	pagination: { el: ‘.swiper-pagination’, clickable: true }
navigation	ナビゲーションボタンの設定	null	navigation: { nextEl: ‘.swiper-button-next’, prevEl: ‘.swiper-button-prev’ }
scrollbar	スクロールバーの設定	null	scrollbar: { el: ‘.swiper-scrollbar’, hide: true }
slidesPerView	一度に表示するスライドの数	1	`slidesPerView: 3`
`spaceBetween`	スライド間のスペース（ピクセル）	0	`spaceBetween: 30`
breakpoints	レスポンシブデザインのブレークポイント	{}	`breakpoints: { 640: { slidesPerView: 1, spaceBetween: 10 }, 768: { slidesPerView: 2, spaceBetween: 20 }, 1024: { slidesPerView: 3, spaceBetween: 30 } }`
`effect`	スライドのエフェクト	slide	`effect: 'fade'`
grabCursor	グラブカーソルを表示するか	false	`effect: 'fade'`
`freeMode`	フリーモード（スライドがスナップされず、自由にスクロールできるモード）	false	`freeMode: true`
watchSlidesVisibility	スライドの可視性を監視するか	false	`watchSlidesVisibility: true`
`watchSlidesProgress`	スライドの進行状況を監視するか	false	`watchSlidesProgress: true`
`thumbs`	サムネイルスライダーの設定	{}	`thumbs: { swiper: galleryThumbs }`

まとめ

Swiperは、その使いやすさと機能性から、制作者にとって欠かせないツールとなっています。この記事で紹介した基本的な使い方や実装例、オプションを御社サイトにご活用いただけると幸いです。