【2026年最新版】Swiperの使い方完全ガイド｜基本から動かない時の対処法まで

スライドショー
デモはこちら
CODEPENで見る


See the Pen
Swiper by ORTEGAWORKS (@ORTEGAWORKS)
on CodePen.


結論：Swiperは最もおすすめのスライダープラグイン

「スライドショーを実装したいけど、どのプラグインを使えばいいか分からない…」そんな悩みを抱えていませんか？

Swiperは、jQueryに依存せず、モダンなJavaScriptで動作する最も人気のあるスライダープラグインです。モバイルファーストで設計されており、豊富なオプションとレスポンシブ対応により、あらゆるWebサイトに対応できます。

この記事でわかること
  • Swiperの基本的な実装手順（CDN・ファイル読み込み）
  • よく使うオプション設定とカスタマイズ方法
  • 動かない時の原因チェックリストと解決法
この記事を読んで欲しい人
  • Web制作でスライダーを実装したい人
  • jQueryを使わずにスライダーを作りたい人
  • Swiperが動かなくて困っている人

Swiperとは？なぜ選ばれるのか

Swiperの概要

Swiperは、モバイルとデスクトップの両方に対応した、フリーで使えるスライダープラグインです。

Swiperが選ばれる3つの理由

  • jQuery不要：モダンなJavaScriptで動作し、軽量
  • 豊富なオプション：自動再生、ループ、ページネーション、レスポンシブなど多彩
  • モバイルファースト：タッチ操作に最適化された設計

公式サイト：https://swiperjs.com/

Swiperの基本実装手順【3ステップ】

Swiperの実装方法

Swiperの実装は、以下の3ステップで完了します。この順番を守ることが、エラーを防ぐ最大のポイントです。

ステップ1：CSSファイルの読み込み

まず、HTMLの<head>内にSwiperのCSSを読み込みます。

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

注意：バージョン番号（@11）は、最新版を使いたい場合は公式ドキュメントで確認してください。本記事では安定版のバージョン11を使用します。

ステップ2：HTMLマークアップの配置

次に、スライドショーを表示したい場所にHTMLを配置します。

  1. <div class="swiper">
  2.   <div class="swiper-wrapper">
  3.     <div class="swiper-slide"><img src="images/slide01.jpg" alt="スライド1"></div>
  4.     <div class="swiper-slide"><img src="images/slide02.jpg" alt="スライド2"></div>
  5.     <div class="swiper-slide"><img src="images/slide03.jpg" alt="スライド3"></div>
  6.   </div>
  7.   <!-- ページネーション（ドット表示） -->
  8.   <div class="swiper-pagination"></div>
  9.   <!-- 前へ・次へボタン -->
  10.   <div class="swiper-button-prev"></div>
  11.   <div class="swiper-button-next"></div>
  12. </div>

重要なクラス名の役割

クラス名 役割 変更可否
swiper-wrapper スライド全体を囲む必須要素 ❌ 変更不可
swiper-slide 個々のスライドアイテム ❌ 変更不可
swiper 最外側のコンテナ ✅ 変更可能
swiper-pagination ページネーション（ドット） ✅ 変更可能
swiper-button-prev/next 前へ・次へボタン ✅ 変更可能

注意：swiper-wrapperとswiper-slideは変更できませんが、<div>を<ul><li>に変更することは可能です。

ステップ3：JavaScriptファイルの読み込みと初期化

</body>閉じタグの直前に、以下の順番でJavaScriptを読み込みます。

  1. <!-- 1. Swiper本体を先に読み込む -->
  2. <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  3. <!-- 2. 初期化コードを後に読み込む -->
  4. <script src="js/swiper-init.js"></script>

次に、swiper-init.jsに初期化コードを記述します。

  1. const mySwiper = new Swiper('.swiper', {
  2.   // ループ再生
  3.   loop: true,
  4.   // スライド切り替えの速度（ミリ秒）
  5.   speed: 600,
  6.   
  7.   // 自動再生
  8.   autoplay: {
  9.     delay: 3000, // 3秒ごとに切り替え
  10.     disableOnInteraction: false, // ユーザー操作後も自動再生継続
  11.   },
  12.   
  13.   // ページネーション
  14.   pagination: {
  15.     el: '.swiper-pagination',
  16.     clickable: true, // クリックで移動可能
  17.     type: 'bullets', // 'bullets', 'fraction', 'progressbar'
  18.   },
  19.   
  20.   // ナビゲーションボタン
  21.   navigation: {
  22.     nextEl: '.swiper-button-next',
  23.     prevEl: '.swiper-button-prev',
  24.   },
  25. });

これで基本的なスライドショーが動作します！

実務で使える！よく使うオプション設定

よく使うオプション設定

ここでは、実際の制作現場でよく使われるオプションをシーン別に紹介します。

1. 複数枚表示＋レスポンシブ対応

PCでは3枚、タブレットでは2枚、スマホでは1枚表示する設定です。

  1. const mySwiper = new Swiper('.swiper', {
  2.   slidesPerView: 1, // デフォルトは1枚
  3.   spaceBetween: 20, // スライド間の余白（px）
  4.   
  5.   // レスポンシブ設定
  6.   breakpoints: {
  7.     // 768px以上（タブレット）
  8.     768: {
  9.       slidesPerView: 2,
  10.       spaceBetween: 30,
  11.     },
  12.     // 1024px以上（PC）
  13.     1024: {
  14.       slidesPerView: 3,
  15.       spaceBetween: 40,
  16.     },
  17.   },
  18. });

2. 縦方向スライド

縦にスクロールするスライドショーを作成する場合の設定です。

  1. const mySwiper = new Swiper('.swiper', {
  2.   direction: 'vertical', // 'horizontal'（横）または 'vertical'（縦）
  3.   loop: true,
  4.   autoplay: {
  5.     delay: 2500,
  6.   },
  7. });

注意：縦方向スライドでは、.swiperにheightを指定する必要があります。

  1. .swiper {
  2.   height: 500px; /* 必須 */
  3. }

3. フェード切り替え

スライドではなく、フェードイン・アウトで切り替える設定です。

  1. const mySwiper = new Swiper('.swiper', {
  2.   effect: 'fade', // 'slide', 'fade', 'cube', 'coverflow', 'flip'
  3.   fadeEffect: {
  4.     crossFade: true, // クロスフェード有効化
  5.   },
  6.   loop: true,
  7.   autoplay: {
  8.     delay: 4000,
  9.   },
  10. });

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

メインスライドとサムネイルを連動させる設定です。

  1. <!-- メインスライダー -->
  2. <div class="swiper swiper-main">
  3.   <div class="swiper-wrapper">
  4.     <div class="swiper-slide"><img src="images/01.jpg"></div>
  5.     <div class="swiper-slide"><img src="images/02.jpg"></div>
  6.   </div>
  7. </div>
  8. 

  9. <!-- サムネイルスライダー -->
  10. <div class="swiper swiper-thumbs">
  11.   <div class="swiper-wrapper">
  12.     <div class="swiper-slide"><img src="images/01-thumb.jpg"></div>
  13.     <div class="swiper-slide"><img src="images/02-thumb.jpg"></div>
  14.   </div>
  15. </div>
  1. // サムネイルスライダーを先に初期化
  2. const swiperThumbs = new Swiper('.swiper-thumbs', {
  3.   slidesPerView: 4,
  4.   spaceBetween: 10,
  5.   watchSlidesProgress: true, // 必須
  6. });
  7. 

  8. // メインスライダーで連動
  9. const swiperMain = new Swiper('.swiper-main', {
  10.   thumbs: {
  11.     swiper: swiperThumbs, // サムネイルと連動
  12.   },
  13. });

主要オプション一覧表

主要オプション一覧表

Swiperで頻繁に使用されるオプションをまとめました。この表を見れば、基本的なカスタマイズはすべて対応できます。

オプション名 説明 デフォルト値 設定例
loop ループ再生の有効化 false true
speed スライド移動速度（ミリ秒） 300 600
direction スライド方向 'horizontal' 'vertical'
slidesPerView 1画面に表示するスライド数 1 3 / 'auto'
spaceBetween スライド間の余白（ピクセル） 0 20
effect 切り替えエフェクト 'slide' 'fade', 'cube', 'flip'
autoplay.delay 自動再生の間隔（ミリ秒） 3000 5000
autoplay.disableOnInteraction 操作後に自動再生を停止するか true false
pagination.type ページネーションの種類 'bullets' 'fraction', 'progressbar'
pagination.clickable ページネーションクリック可否 false true
breakpoints レスポンシブ設定 – 上記サンプル参照

すべてのオプションは、公式APIドキュメントで確認できます。

Swiperが動かない時の原因チェックリスト

動かない時のチェックリスト

「コードを書いたのに動かない…」そんな時は、以下のチェックリストを上から順に確認してください。ほとんどの場合、このリストで解決できます。

  • CSSとJavaScriptの読み込み順が正しいか
    → CSS → Swiper本体JS → 初期化JSの順で読み込んでいますか？
  • Swiperのバージョンが統一されているか
    → CSSとJSで異なるバージョン（例：CSS=@11、JS=@7）を読み込んでいませんか？
  • クラス名が一致しているか
    → HTMLのclass="swiper"とJSのnew Swiper('.swiper')が一致していますか？
  • 必須クラス名を変更していないか
    → swiper-wrapperとswiper-slideは変更できません
  • ブラウザのコンソールにエラーが出ていないか
    → F12キーで開発者ツールを開き、Console（コンソール）タブを確認
  • ファイルパスが正しいか
    → CDNのURLや、自前JSファイルのパスが間違っていませんか？
  • スライドが2枚以上あるか
    → loop: trueを使う場合、最低2枚以上のスライドが必要です
  • 他のJavaScriptとの競合がないか
    → 他のプラグインやスクリプトがSwiperの動作を妨げていないか確認

よくあるエラーメッセージと対処法

エラーメッセージ 原因 対処法
Swiper is not defined Swiper本体が読み込まれていない Swiper本体JSの読み込み順を確認
Cannot read property 'querySelector' 指定したクラス名が存在しない HTMLとJSのクラス名を確認
スライドがガクガクする CSSが正しく読み込まれていない Swiper CSSの読み込みを確認
ループが動作しない スライドが1枚しかない 最低2枚以上のスライドを用意

デバッグのための確認コマンド

ブラウザのコンソールに以下を入力すると、Swiperが正しく読み込まれているか確認できます。

  1. console.log(Swiper); // Swiper本体が読み込まれていればオブジェクトが表示される

よくある質問

Q1. Swiperは商用利用できますか？

はい、SwiperはMITライセンスで提供されているため、無料で商用利用可能です。クレジット表記も不要です。

Q2. jQueryは必要ですか？

いいえ、Swiperはバニラ（素の）JavaScriptで動作するため、jQueryは不要です。これにより、サイトの読み込み速度が向上します。

Q3. WordPressで使う場合の注意点はありますか？

WordPressでは、wp_enqueue_script()を使ってスクリプトを読み込むのが推奨されます。また、テーマによってはすでにSwiperが読み込まれている場合があるため、二重読み込みに注意してください。

Q4. バージョン7と11で記述方法は違いますか？

基本的な記述方法は同じですが、一部のオプション名や機能が変更・追加されています。本記事では最新の安定版（バージョン11）を使用していますが、古いバージョンを使う場合は公式のマイグレーションガイドを参照してください。

Q5. CDNとダウンロード版、どちらを使うべきですか？

開発段階ではCDNが便利ですが、本番環境ではダウンロード版の使用を推奨します。理由は以下の通りです。

  • CDNのサーバーがダウンした場合のリスク回避
  • バージョンの固定による安定性の確保
  • オフライン環境でも動作する

まとめ

この記事では、Swiperの基本的な実装方法から、実務で使える応用例、動かない時の対処法まで解説しました。

この記事のポイント
  • SwiperはjQuery不要で軽量・高機能なスライダープラグイン
  • CSS → Swiper本体JS → 初期化JSの読み込み順を守る
  • swiper-wrapperとswiper-slideのクラス名は変更不可
  • レスポンシブ対応はbreakpointsオプションで簡単に実装可能
  • 動かない時は読み込み順・クラス名・バージョン統一をチェック

Swiperをマスターすれば、ECサイトのバナースライダー、ポートフォリオの作品ギャラリー、ブログのサムネイルスライドなど、幅広い用途に対応できます。

ぜひ実際にコードを書いて、Swiperの便利さを体感してください！

機能実装一覧

スポンサーリンク