【スライダー実装】Swiperの使い方、便利なオプションまとめ

公開日：2025-10-27 / 更新日：2025-10-28

JavaScript

Swiper

Webサイトにスライダーを実装したい場合、JavaScriptライブラリ「Swiper」がおすすめです。

SwiperはjQueryを必要とせず、軽量で動作が速く、モバイルデバイスでのタッチ操作にも最適化されているのが特徴です。

また、公式ドキュメントも充実しており、日本語での情報も多く見つけやすいため、何かインストール方法やカスタマイズでつまずいたときでも安心です。

今回は、Swiperのインストール方法や基本的な使い方を解説します。

※本記事執筆時点のSwiperバージョンは、「12.0.3」です。ご利用の時期や環境によっては、内容が異なる場合がありますので、あらかじめご了承下さい。

Swiperのインストール方法

Swiperをインストールするには以下の3つの方法があります。

Swiperのインストール方法

ファイルをローカル上にダウンロードしてきて使う方法
CDNを使う方法
npmを使う方法

ファイルをローカル上にダウンロードしてきて使う方法

ローカル上にファイルをダウンロードしてきて使いたい場合は、以下のサイトにアクセスします。

https://www.jsdelivr.com/package/npm/swiper

「Download」アイコンをクリックします。

これでSwiperがダウンロードされました。

実際に読み込む必要があるのは「swiper-bundle.min.css」または「swiper.min.css」、そして「swiper-bundle.min.js」の2ファイルです。

「swiper-bundle.min.css」または「swiper.min.css」
「swiper-bundle.min.js」

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Swiperのインストール方法</title>
    <link rel="stylesheet" href="swiper-bundle.min.css">
    <link rel="stylesheet" href="my-style.css">
    <script src="swiper-bundle.min.js" defer></script>
    <script src="my-script.js" defer></script>
</head>

「swiper.min.css」は、Swiperの基本動作に必要な最小限のスタイルのみを含んでいるため、ナビゲーションやページネーションなどの追加モジュールのスタイルは自分でカスタマイズしたい方におすすめです。

一方、「swiper-bundle.min.css」は、ナビゲーションやページネーションなどの追加モジュールを含むSwiper全体のスタイルがまとめて定義されており、特にCSSを自分で記述しなくても、ある程度整った見た目の状態で利用したい場合に適しています。

「swiper.min.js」とは？

「swiper-bundle.min.js」とは別に、「swiper.min.js」というファイルもありますが、こちらはSwiperのコア機能のみを含む軽量版ファイルです。

「swiper.min.js」を使用する場合、ナビゲーションやページネーションなどの機能を利用するには、別途moduleをimportして設定する必要があります。

初心者でよく分からないという方は、「swiper-bundle.min.js」を使うことをおすすめします。

CDNを使う方法

CDNを使う場合は、headタグ内に以下を記述します。

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

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

npmを使う方法

npmを使う場合は、ターミナルにnpm install swiperと打ち込んでパッケージをインストールします。

インストールできたら、以下のようにSwiper本体とCSSを読み込みます。

import Swiper from 'swiper/bundle';

import 'swiper/css/bundle';

「swiper/bundle」からimportした場合は、すべてのSwiperモジュールがまとめて読み込まれます。（CSSも同様「swiper/css/bundle」とした場合は、すべてのスタイルが読み込まれる。）

一方、Swiperのコア部分だけを読み込み、必要なモジュールを個別に読み込みたい場合は、「swiper」からコアファイル、「swiper/modules」から各モジュールをimportします。

この場合、Swiperの初期化時に使用するモジュールを明示的に設定する必要がある点に注意してください。

import Swiper from 'swiper';

import { Navigation, Pagination } from 'swiper/modules';

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

const swiper = new Swiper('.swiper', {
  // 使用するモジュールを明示的に設定する
  modules: [Navigation, Pagination],
  ...
});

Swiperの基本的な使い方

Swiperの基本的な使い方は以下の通りです。

まずは、以下のような最小構成のデモを実際に動かす方法を解説します。

See the Pen Swiper デモ① by E-VALUE WORKS (@evw) on CodePen.

なお、ここでは「Swiperのインストール方法」で解説した手順で、必要なCSSおよびJSファイルがすでに読み込まれていることを前提として進めていきます。

ベースとなるHTMLを用意する

swiperのベースとなる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>

swiperクラスを持つコンテナの中に、swiper-wrapperクラスを持つラッパー要素を配置し、その中にswiper-slideクラスを持つ各スライドを並べていきます。

また、ページネーションや前後ページリンクを表示させたい場合は、それぞれswiper-paginationクラス、swiper-button-prev / swiper-button-nextを持つ要素を追加します。

このうち、swiper / swiper-wrapper / swiper-slideの3つは必須の要素で、クラス名を変更することはできません。

一方、swiper-paginationやswiper-button-prev / swiper-button-nextは任意の要素です。

「swiper-bundle.min.css」を使用している場合は、swiperクラス直下に配置することを想定したスタイルが適用されますが、自分でCSSを指定する場合は、swiperコンテナの外であっても問題ありません。

Swiperの初期化処理を記述する

ベースとなるHTMLが完成したら、Swiperの初期化処理をJavaScriptファイルに記述します。

new Swiper(".swiper",{・・・})のように、第一引数に初期化したいswiperのセレクター、第二引数にオブジェクト形式でオプション（設定）を渡していきます。

document.addEventListener("DOMContentLoaded", () => {
  const swiper = new Swiper(".swiper", {・・・});
});

同一ページ内に複数のswiper要素があった際は、全て同一の設定で初期化されてしまうため、実際に使う際は個別に他のクラスを追加して設定するのがおすすめです。

<div class="swiper js-mvSlider">
    <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>

document.addEventListener("DOMContentLoaded", () => {
  const swiper = new Swiper(".js-mvSlider", {・・・});
});

オプション（設定）は、以下のようにプロパティと値をセットで記述します。

document.addEventListener("DOMContentLoaded", () => {
  const swiper = new Swiper(".js-mvSlider", {
    speed: 400, // スライドが切り替わる速度（ミリ秒単位）
    spaceBetween: 100, // スライド間の余白（px）
  });
});

また、ページネーションや前後ページリンクのモジュールを使用したい場合は、それぞれ「pagination」「navigation」と追加し、値にはオブジェクト形式で、モジュール固有のオプションを指定していきます。

document.addEventListener("DOMContentLoaded", () => {
  const swiper = new Swiper(".js-mvSlider", {
    speed: 400, // スライドが切り替わる速度（ミリ秒単位）
    spaceBetween: 100, // スライド間の余白（px）

    // ページネーション（ドットナビ）設定
    pagination: {
      el: ".js-mvSlider .swiper-pagination", // ページネーションを表示する要素
    },

    // ナビゲーションボタン設定
    navigation: {
      nextEl: ".js-mvSlider .swiper-button-next", // 「次へ」ボタンの要素
      prevEl: ".js-mvSlider .swiper-button-prev", // 「前へ」ボタンの要素
    },
  });
});

これで、以下のようなデモが作成できました。

See the Pen Swiper デモ① by E-VALUE WORKS (@evw) on CodePen.

上ではいくつかのみ紹介しましたが、Swiperには非常に多くのオプションが用意されています。

以下では、その中でも特によく使われるものを紹介します。

Swiperでよく使われる便利なオプションまとめ

Swiperには非常に多くのオプションが用意されているため、全ての紹介はできませんが、以下ではよく使われるもののみ紹介していきます。

		説明	初期値
speed		スライドが切り替わる速度（ミリ秒単位）を指定できる。	300
loop		trueに設定すると、スライドが無限ループされる。	false
slidesPerView		同時に表示させたいスライドの枚数を指定できる。	1
slidesPerGroup		1回のスライド操作で動かすスライド枚数を指定できる。	1
spaceBetween		スライド間の余白（px）を指定できる。	0
effect		スライド切り替え時のトランジション（アニメーション）効果を指定します。指定できる値は以下の通り。 slide / fade / cube / coverflow / flip / creative / cards	slide
breakpoints		画面サイズ（ブレークポイント）ごとに異なるパラメーターを設定できる。
autoplay		スライドを自動再生させることができる。自動再生を有効にするには、オートプレイ用のパラメーターを指定したオブジェクト、またはtrue（デフォルト設定で有効化）を指定。
	delay	スライドの切り替え間隔（ミリ秒単位）を指定できる。特定のスライドごとに異なる間隔を設定したい場合は、各スライドにdata-swiper-autoplay属性を指定。	3000
	disableOnInteraction	ユーザーがスワイプ操作を行った後に自動再生を停止させるか指定できる。 falseにすると、ユーザーが操作を行っても自動再生は停止せず、操作後に再開される。	true
	pauseOnMouseEnter	マウスカーソルがSwiperコンテナ上に乗った際に、自動再生を一時停止させることができる。	false
allowTouchMove		falseにすると、スワイプ操作によるスライドの切り替えを無効にできる。	true
init		Swiperをインスタンス生成時に自動で初期化するかどうかを指定できる。 falseにした場合は、swiper.init() を呼び出して手動で初期化する必要がある。	true
direction		スライド方向を指定できる。 horizontal / verticalのいずれかの値を指定できる。	horizontal
centeredSlides		trueに設定すると、アクティブなスライドが常に左端ではなく中央に配置される。	false
モジュール関連
pagination		ページネーションを有効化できる。ページネーションを有効にするには設定をまとめたオブジェクト、またはtrue（デフォルト設定で有効化）を指定。
	el	ページネーションを配置するコンテナ要素をCSSセレクタ、またはHTML要素で指定。	null
	clickable	trueに設定すると、ページネーションのドットをクリックした際に、対応するスライドへ移動させることができる。	false
	type	ページネーションのタイプを指定できる。指定できる値は以下の通り。 bullets / fraction / progressbar / custom	bullets
navigation		ナビゲーション（前後ボタン）を有効化できる。ナビゲーションを有効にするには、設定をまとめたオブジェクトか、true（デフォルト設定で有効化）を指定。
	nextEl	「次へ」ボタンとして機能する要素を、CSSセレクタ、またはHTML要素で指定。	null
	prevEl	「前へ」ボタンとして機能する要素を、CSSセレクタ、またはHTML要素で指定。	null
scrollbar		スクロールバーを有効化できる。スクロールバーを有効にするには、設定をまとめたオブジェクトか、true（デフォルト設定で有効化）を指定。
	el	スクロールバーを配置するコンテナ要素をCSSセレクタ、またはHTML要素で指定。	null
	draggable	trueに設定すると、スクロールバーをドラッグしてスライダーの位置を操作できる。	false
イベント関連
on		イベントハンドラー（イベント処理）を登録できる。
	init	Swiperの初期化が完了した直後に発火。
	resize	ウィンドウサイズが変更された際、Swiperが内部でリサイズ処理を行う直前に発火。
	slideChange	現在アクティブなスライドが変更されたときに発火。

スライダーサンプル①：自動再生されるスライダー

See the Pen Swiper デモ② 自動再生 by E-VALUE WORKS (@evw) on CodePen.

スライダーサンプル②：フェードで切り替わるスライダー

See the Pen Untitled by E-VALUE WORKS (@evw) on CodePen.

スライダーサンプル③：レスポンシブ対応のスライダー

See the Pen Swiper デモ④ レスポンシブ対応 by E-VALUE WORKS (@evw) on CodePen.

Swiperインスタンスから呼び出せる便利なプロパティ・メソッド

Swiper を初期化すると、返り値として「Swiperインスタンス（オブジェクト）」が返されます。

このインスタンスを変数に代入しておくことで、プロパティを参照して現在の状態や情報を取得したり、メソッドを使ってスライダーを操作したりすることができます。

こちらもよく使う便利なものだけ紹介します。

プロパティ
swiper.activeIndex	現在アクティブなスライドのインデックス番号を取得。
swiper.allowSlideNext	trueまたはfalseを設定することで、次のスライドへ移動できるかどうかを指定できる。（true：スライドできる、false：スライドできない）
swiper.allowSlidePrev	trueまたはfalseを設定することで、前のスライドへ移動できるかどうかを指定できる。（true：スライドできる、false：スライドできない）
swiper.realIndex	loopモードで再配置されたスライドを考慮した、現在アクティブなスライドのインデックス番号を取得。
swiper.slides	スライド要素の配列を取得。
メソッド
swiper.init(el)	スライダーを初期化する。
swiper.on(event, handler)	イベントハンドラー（イベント処理）を登録できる。
swiper.slideNext(speed, runCallbacks)	次のスライドへのトランジションを実行 speed：トランジションの時間（ミリ秒単位）を指定。 runCallbacks：デフォルトではtrueでスライド移動時にイベントが発生。false に設定するとトランジションイベントが発生しない。
swiper.slidePrev(speed, runCallbacks)	前のスライドへのトランジションを実行 speed：トランジションの時間（ミリ秒単位）を指定。 runCallbacks：デフォルトではtrueでスライド移動時にイベントが発生。false に設定するとトランジションイベントが発生しない。
swiper.slideTo(index, speed, runCallbacks)	スライドを「index」で指定した番号へトランジションさせる。 index：スライドのインデックス番号を指定。 speed：トランジションの時間（ミリ秒単位）を指定。 runCallbacks：デフォルトではtrueでスライド移動時にイベントが発生。false に設定するとトランジションイベントが発生しない。
swiper.destroy(deleteInstance, cleanStyles)	スライダーを無効化する。 deleteInstance：インスタンス自体を削除するかどうか（デフォルトはtrue） cleanStyles：スライダー要素の不要なスタイルを削除するかどうか（デフォルトはtrue）