カピラボ

2025.07.06 SUN

コーディング

【初心者向け】Swiperの使い方を徹底解説！導入からサンプルコードまで

カピたろう

カピたろう

【初心者向け】Swiperの使い方を徹底解説！導入からサンプルコードまで

目次

はじめに

Webサイトやアプリでよく見かける「画像が横にスライドしていくUI」。いわゆるスライダー（カルーセル）機能は、商品紹介やキャンペーンバナー、ポートフォリオなど様々な場面で利用されます。
その中でも世界的に人気が高いのが Swiper（スワイパー） です。

本記事では、Swiperをこれから学びたい初心者や中級者向けに「導入方法」「基本的な使い方」「よく使うオプション」「応用テクニック」「トラブルシューティング」まで徹底的に解説します。

この記事を最後まで読めば、swiperの使い方について一通り理解でき、実際のサイトに導入できるように解説させていただきます！

Swiperとは？

Swiperは、JavaScriptで作られたオープンソースのスライダーライブラリです。公式サイトはこちらのリンクから（ https://swiperjs.com/ ）

特徴

  • タッチ操作対応（モバイルでもスムーズにスワイプできる）
  • 豊富な機能（自動再生、ループ、ページネーション、サムネイル連動など多数）
  • 高い拡張性（CSSで自由にデザイン変更、モジュール方式で必要な機能だけを使える）
  • フレームワーク対応（React / Vue / Angular / Svelte でも簡単に利用可能）
  • 軽量かつ高速（非常にパフォーマンスが高く、モダンブラウザで快適に動作）

Swiperを使うメリット

  • jQuery不要、純粋なJavaScriptで動く
  • スマホユーザーに最適化
  • デザイン・機能の自由度が高い
  • ドキュメントが充実しており学習コストが低い

デメリット

  • 機能が豊富すぎて初心者は迷いやすい
  • IE非対応（古い環境では使えない）
  • CSSやJSの読み込みを忘れると動作しない

Swiperの導入方法

Swiperを利用するには、大きく分けて3つの方法があります。

CDNで導入（最も簡単）

HTMLに以下を追加するだけで使えます。

HTML
<!-- SwiperのCSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<!-- SwiperのJS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

npmで導入（本格的な開発向け）

プロジェクトで管理したい場合はこちら。

Bash
npm install swiper
JavaScript
import Swiper from 'swiper';
import 'swiper/css';

Swiperの基本構造とサンプルコード

Swiperを動かすには、特定のHTML構造が必要です。

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 class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

ポイント

  • .swiperが親コンテナ
  • .swiper-wrapper がスライド全体のラッパー
  • .swiper-slideが各スライド

JavaScript（基本）

JavaScript
const swiper = new Swiper('.swiper', {
  loop: true,
  autoplay: {
    delay: 3000,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

これで「ループ＋自動再生＋ページネーション＋ナビゲーション」付きのスライダーが完成します。

よく使うオプションまとめ

Swiperのオプションは非常に多いですが、まずは以下のオプションを押さえておけばある程度使えるようになります。

loop スライドをループさせる機能です。
autoplay 自動再生を行います。
slidesPerView 一度に表示するスライド数を制御します。
spaceBetween スライド間の余白を決められます。
breakpoints レスポンシブの設定を行えます。
pagination ページネーション設定が行えます。
navigation 前後ボタンを設定できます。
scrollbar スクロールバーを表示させることができます。

レスポンシブ対応の実装例

「スマホは1枚、PCは3枚表示」などの指定ができます。

関連記事はありません。