【初心者向け】Swiperの使い方入門｜画像スライダーの導入から実装まで

2024-11-172025-08-23

記事内にプロモーションを含む場合があります。

ワンクリックで目的地へGO！

Swiperとは？

Swiperの詳細情報はSwiper公式サイトをご覧ください。

Swiperは、モバイル端末向けに最適化された高性能なスライダーライブラリです。
タッチ操作に強く、スマートフォンやタブレットでもスムーズなスライド操作が可能。
軽量ながら多機能で、画像ギャラリーやバナー、カルーセル表示など幅広く使えます。

導入方法も比較的シンプルで、HTML・CSS・JavaScriptの基本的な知識があればすぐに始められます。
私も初めて使ったときは、公式サイトのサンプルとにらめっこしながら試行錯誤しましたが、一度動くと感動するほど滑らかに動いてくれました。

この記事では、Swiperの導入方法と、初心者でも再現しやすい画像スライダーの実装方法を紹介します。

Swiperの主なメリットとデメリット

メリット

モバイル対応が非常に強力
タッチ操作がスムーズで、スマホやタブレットでも快適に動作します。
パフォーマンスに優れている
軽量かつ高速。画面遷移の滑らかさがユーザー体験を高めてくれます。
カスタマイズ性が高い
スライダーの見た目や動きを細かく設定でき、公式ドキュメントも充実しています。
幅広い用途に対応可能
画像スライダーだけでなく、カルーセルやバナー、レビュー表示など応用範囲が広いです。

デメリット

シンプルなスライダーには少しオーバースペック
最低限の表示だけで良い場合は、オプションが多すぎて複雑に感じることも。
設定方法に最初は戸惑うかも
初心者の頃は、どのオプションが何に効いているのか分からず試行錯誤しました。

初心者向けから高度なプロジェクトまで柔軟に対応できる点で、Swiperは人気の選択肢です！

類似スライダーとの比較

Swiperを含む3つの代表的なライブラリを比較してみました。
用途に応じて使い分ける参考になれば嬉しいです。

スクロールできます

特徴/ライブラリ	Swiper	Slick Slider	Owl Carousel
使いやすさ	多機能で設定項目が多い	比較的シンプル	初期設定はやや簡単
動作のスムーズさ	非常にスムーズで高速	通常レベル	少し重く感じる場合もある
モバイル対応	タッチ操作に強く最適化されている	一般的なモバイル対応	標準的な対応
カスタマイズ性	JS中心で細かな制御が可能	CSSベースでも変更しやすい	柔軟性はやや劣る
公式サポート	情報が豊富・例も多い	安定して情報あり	やや情報が少なめ

比較を基に、用途や目的に応じて選択するのも◎

🔰 私は最初、Slick Sliderから始めてみたんですが、画像を並べたいだけの用途ならそれでも十分。
でも「タッチ操作」や「レスポンシブ」「カスタム動作」まで欲しくなってくると、Swiperが断然便利でした。

Swiperの導入準備

Swiperを使い始めるには、まず「ライブラリの読み込み」が必要です。
導入方法はいくつかありますが、ここでは初心者にもわかりやすく、それぞれの特徴とおすすめの選び方を紹介します。

Swiperのインストール方法と特徴

インストール方法	特徴	使い方の概要
NPM	開発環境に最適。バージョン管理や依存関係の管理がしやすい	`npm install swiper` でインストールしてJSで読み込む
CDN	HTMLにタグを追加するだけ。導入がもっとも簡単	Swiper公式サイトからタグをコピー＆貼り付け
ダウンロード	ファイルをローカルに保存。オフラインでも動作可能	ZIPファイルを解凍し、CSS・JSを読み込む

選び方のポイント

NPM：本格的なプロジェクトやモジュール管理を行いたい場合
→ NPMを使うのが最適です。
　柔軟に機能を選び、必要に応じてバージョン管理もできます。
CDN：シンプルなサイトやすぐに使いたい場合
→ CDNを利用する方法が便利です。
　スクリプトをHTMLに挿入するだけで、すぐにSwiperが使えるので初心者にもおすすめです。
ダウンロード：オフライン環境での使用や独自ファイルの管理が必要な場合
→ ダウンロードしてローカルで利用する方法が良いでしょう。
　独自にカスタマイズも容易です。

初心者にはどれがいい？

私のように、まず「動かしてみたい！」という方には、以下の方法がおすすめです：

🔰 CDN → すぐ試せて一番カンタン！
🔧 ダウンロード → ファイル管理を自分でコントロールしたい場合におすすめ

※NPMはNode.jsベースの開発環境を使っている方向けなので、ここでは割愛します。

この記事では、CDNを使う方法とダウンロードで導入する方法の2つを順に解説します。
どちらも私自身が実際に試した方法なので、初心者の方でも再現しやすいと思います！

方法1：CDN（Content Delivery Network）を使用する方法

CDNを使うと、SwiperのCSSとJSファイルを外部サーバーから読み込んで利用できます。
HTMLにタグをコピペするだけで導入できるため、とにかく簡単に試してみたい方におすすめです。

CDN導入のメリット・デメリット

メリット	デメリット
インストール不要。タグを貼るだけで即使える常に最新版が使える導入が一瞬で終わるので、初心者でもつまずきにくい	インターネットに接続していないとSwiperが動かないバージョンを固定したい場合はURLに注意が必要 CDNの不具合があると表示できない可能性も（滅多にないですが）

CDN導入のステップ

STEP

Swiperの公式サイトからCDNコードを取得する

Swiper公式サイトへアクセス。

公式サイトのトップページから「Get Started」をクリック

STEP

Use Swiper from CDNからコードを取得する

※2024年11月時点でのSwiperのCDNバージョンはv11

STEP

①HTMLの<head>タグ内にSwiperのスタイルシートを追加します。

<!-- headタグ内：SwiperのCSSをCDNで読み込み -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">

STEP

②</body>閉じタグの直前にSwiperのスクリプトを追加します。

<!-- body閉じタグ直前：SwiperのJavaScriptを読み込む -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- 自分のJavaScriptファイルを読み込む -->
<script src="./js/script.js"></script>

自作の script.js は、Swiperより後に記述してください。

STEP

完成イメージ（CDN読み込み済みのHTML）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>SwiperのCDN導入例</title>

  <!-- SwiperのCSSを読み込み -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
</head>
<body>

  <!-- スライダー本体はここに入れます（次の章で解説） -->

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

ここまでできれば、Swiperの導入は完了です！
次は、ローカルで使う場合の方法（ダウンロード導入）を解説していきます。CDNが不安な方や、オフラインで使いたい方はこちらをどうぞ！

方法2：ダウンロードしてローカルで使用する方法

Swiperのファイルを自分のPCにダウンロードし、ローカル環境に保存して使用する方法です。
インターネット接続がなくても動作するため、安定性やカスタマイズ性を重視したい方におすすめです。

ダウンロード導入のメリット・デメリット

メリット	デメリット
オフラインでも使用できるバージョンを自分で管理できる自分のフォルダでカスタマイズしやすい	アップデート時は手動でファイルを差し替える必要ありファイル配置やパス設定など、若干の手間がある作業環境を整理しておく必要がある

ローカル導入のステップ

STEP

Swiperの公式サイトへアクセスして、最新バージョンをダウンロードします。

STEP

ダウンロードファイルの取得

「Use Swiper from CDN」のすぐ下にある「Download assets」ボタンをクリック

「Download」ボタンをクリックして、Swiperのファイルを含む圧縮ファイル（zip形式）を取得します。

STEP

ZIPファイル（圧縮ファイル）をダウンロードし、解凍します

STEP

必要なファイルを見つける

解凍したフォルダ内にある以下の2つを使用します：

swiper-bundle.min.css（スタイル用）
swiper-bundle.min.js（機能用）

これらを自分のプロジェクト内の css/ や js/ フォルダにコピーしておきましょう。

STEP

HTMLに読み込みコードを記述

<!-- head内：SwiperのCSSファイル -->
<link rel="stylesheet" href="css/swiper-bundle.min.css">

<!-- body閉じタグ直前：SwiperのJS + 自作のJS -->
<script src="js/swiper-bundle.min.js"></script>
<script src="js/script.js"></script>

href や src のパスは、ファイルを保存した場所に合わせて調整してください。
間違えやすいポイントなので要注意です！

STEP

完成イメージ（ローカル読み込み版HTML）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Swiperローカル導入例</title>

  <!-- SwiperのCSS -->
  <link rel="stylesheet" href="css/swiper-bundle.min.css">
</head>
<body>

  <!-- スライダー本体はこのあとに設置 -->

  <!-- SwiperのJS -->
  <script src="js/swiper-bundle.min.js"></script>
  <script src="js/script.js"></script>
</body>
</html>

れでローカル環境にもSwiperが導入されました！
次は、いよいよSwiperの基本構造（HTML/CSS/JS）を使ってスライダーを実装していきましょう。

Swiperの基本的な構造

ここからは、Swiperを実際に動かすためのHTML・CSS・JavaScriptの基本構造を紹介します。
まずは、最低限の構成からスライダーを表示する仕組みを理解しましょう。

【HTML】Swiperの基本HTML構造

<!-- Swiperのメインコンテナ -->
<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-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- ページネーション（任意） -->
  <div class="swiper-pagination"></div>
</div>

このように、swiper → swiper-wrapper → swiper-slide という階層が基本形です。
ナビゲーションボタンやページネーションは必要に応じて追加します。

クラス名の役割

クラス名	役割とポイント
`.swiper`	スライダー全体の親要素。ここにJSで指定することで、Swiperが対象を認識します（クラス名は任意でOK）
`.swiper-wrapper`	スライドを包むラッパー要素。必須です。
`.swiper-slide`	各スライドの中身。テキストでも画像でもOK。
`.swiper-button-prev` / `.swiper-button-next`	前後にスライドさせるためのナビゲーションボタン（任意）
`.swiper-pagination`	ページネーション（●●●のようなインジケーター）を表示したいときに使います（任意）
`.swiper-scrollbar`	スクロールバーを表示させたいときに追加（必要な場合のみ）

📝補足：.swiper というクラス名は自由に変更できますが、JavaScript側の初期化時に同じクラス名を指定する必要があります。

【CSS】Swiperのスタイル設定（基本）

 /* スライダーのスタイル */
.swiper {
  width: 100%;
  height: 300px;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-button-next,
.swiper-button-prev {
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
}

スタイルのポイント

.swiper に高さを指定しないと、スライダーが表示されません（注意！）
.swiper-slide img には object-fit: cover を使うと、画像がバランスよく表示されます
ナビゲーションボタンの色や背景も調整可能です

【JavaScript】Swiperの初期化コード

Swiperを動かすには、JavaScriptでスライダーを初期化します。

// Swiperの初期化
const swiper = new Swiper('.swiper', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  slidesPerView: 1,
  spaceBetween: 10,
});

各オプションの意味

オプション名	内容
`navigation`	前後ボタンの設定（`.next`, `.prev` をそれぞれ指定）
`pagination`	ページネーション表示（`el` で指定し、`clickable: true` で操作可能に）
`slidesPerView`	一度に表示するスライド数（1枚だけなら「1」）
`spaceBetween`	スライド間の余白（単位はpx）

注意：クラス名が一致していないと動作しないので、HTMLとJSで指定するクラスを必ず合わせましょう。

See the Pen Untitled by Ariii (@ariii-cdp) on CodePen.

Swiperでよく使用されるオプションの一覧表

Swiperには本当に多くのオプションが用意されていますが、まずは基本的によく使われる項目を一覧でまとめました。

オプション名	説明
`loop`	スライダーをループさせる（最後→最初に戻る）
`slidesPerView`	1画面に表示するスライドの数を指定
`autoplay`	自動でスライドを切り替える設定
`navigation`	「前へ」「次へ」ボタンの設定
`pagination`	ドットナビゲーション（ページネーション）の設定
`effect`	スライドの切り替えエフェクト（fade, cube, coverflowなど）
`spaceBetween`	スライド同士の余白をピクセル単位で指定
`centeredSlides`	アクティブスライドを中央に配置
`mousewheel`	マウスホイール操作でスライド切り替え可能に
`keyboard`	キーボード操作でスライド切り替え可能に
`grabCursor`	ホバー時にカーソルを「つかむ」形に変更

補足：
このほかにも、breakpoints（レスポンシブ対応）や lazy（画像遅延読み込み）などがあります。
公式ドキュメントにはさらに多くの設定が載っているので、カスタマイズしたくなったらのぞいてみるのもおすすめです。

シンプルで効果的！3種類のスライダー実装方法

Swiperの基本構造を押さえたら、いよいよ実践編です。
ここでは、私自身が実際に使って「便利！」と思ったスライダー3パターンを紹介します。

① 画像スライダー（基本型）

1枚ずつ手動で切り替えるシンプルなスライダーです。

See the Pen swiper-slider by Ariii (@ariii-cdp) on CodePen.

中央に1枚のみ表示するシンプルなスライダーです。前後のナビゲーションボタンを使って、スライドの切り替えができます。

const swiper = new Swiper('.swiper', {
  slidesPerView: 1,              // 表示スライド数
  centeredSlides: true,          // アクティブスライドを中央に
  spaceBetween: 10,              // スライド間の余白
  loop: true,                    // ループ有効
  navigation: {
    nextEl: '.next',
    prevEl: '.prev',
  },
});

ポイント：中央に1枚だけ表示され、両端にスライドが少し見える設定。
LPやギャラリーページに使いやすい構成です。

② 画像スライダー（複数表示）

複数の画像を一度に見せたいときに便利なタイプ。
商品一覧やコンテンツカルーセルにおすすめです。

See the Pen 画像スライダー (複数表示） by Ariii (@ariii-cdp) on CodePen.

const swiper = new Swiper('.swiper', {
  loop: true,
  slidesPerView: 1.5,
  spaceBetween: 10,
  centeredSlides: true,
  navigation: {
    nextEl: '.next',
    prevEl: '.prev',
  },
});

「1.5」にすると、メインスライド＋両端に少しだけ次のスライドが見えるので、視覚的に動きを感じやすくなります。

③ 自動スライド（オートプレイ）

一定時間ごとにスライドが自動で切り替わる設定です。
トップページのビジュアルエリアなどにぴったり。

See the Pen Untitled by Ariii (@ariii-cdp) on CodePen.

const swiper = new Swiper('.swiper', {
  slidesPerView: 1,
  spaceBetween: 10,
  centeredSlides: true,
  loop: true,
  autoplay: {
    delay: 2000,                 // 2秒ごとに切り替え
    disableOnInteraction: false // ユーザー操作後も自動スライドを継続
  },
  navigation: {
    nextEl: '.next',
    prevEl: '.prev',
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

ページネーション付きで、ユーザーにも現在位置がわかりやすくなります。

必要に応じて使える各機能

Swiperには、ナビゲーションボタンやページネーション、レスポンシブ対応（ブレイクポイント）など、あると便利な追加機能がいくつか用意されています。

「全部使う必要はないけど、欲しいときに追加できる」柔軟さが魅力です。
それぞれの機能と使い方を、コード付きで紹介します。

ナビゲーションボタン（前へ／次へ）

ユーザーが自分でスライドを操作したい場合に使います。

HTMLの例：

<!-- スライダーの外に設置してもOK -->
<button class="prev">Prev</button>
<button class="next">Next</button>

JavaScript設定：

const swiper = new Swiper('.swiper', {
  navigation: {
    nextEl: '.next',
    prevEl: '.prev',
  },
});

HTMLとJSでクラス名が一致していることが重要です。
ボタンは<div>でも<button>でもOKです。

●●● ページネーション（ドット表示）

現在のスライド位置を示すインジケーターです。
ギャラリーやトップスライダーでよく見かけるやつですね。

HTMLの例：

<div class="swiper-pagination"></div>

JavaScript設定：

const swiper = new Swiper('.swiper', {
  pagination: {
    el: '.swiper-pagination',
    clickable: true, // ドットをクリックで移動可能に
  },
});

「clickable: true」を入れると、ユーザーがドットをクリックしてスライドを切り替えられるようになります。

ブレイクポイント（レスポンシブ設定）

画面幅に応じて、表示するスライド数を変えたいときに便利です。
スマホでは1枚、タブレットでは2枚、PCでは3枚…というように切り替えられます。

JavaScript設定：

const swiper = new Swiper('.swiper', {
  breakpoints: {
    // スマートフォン
    480: {
      slidesPerView: 1,
    },
    // タブレット
    768: {
      slidesPerView: 2,
    },
    // デスクトップ
    1024: {
      slidesPerView: 3,
    },
  },
});

slidesPerView 以外にも、spaceBetween や centeredSlides などを画面幅ごとに設定することができます。

HTML構成の見本（統合例）

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="image1.jpg" alt="Image 1"></div>
    <div class="swiper-slide"><img src="image2.jpg" alt="Image 2"></div>
    <div class="swiper-slide"><img src="image3.jpg" alt="Image 3"></div>
  </div>

  <!-- ナビゲーション -->
  <button class="prev">Prev</button>
  <button class="next">Next</button>

  <!-- ページネーション -->
  <div class="swiper-pagination"></div>
</div>

これで、ナビゲーションボタン・ドット表示・レスポンシブすべてに対応したスライダーが作れます！