【2023年最新Ver9】Swiperの使い方とよく使うオプション・カスタマイズ方法を解説

スライダーってどうやって作ればいい？

Web制作ではスライダーの実装は非常に良くある実装の1つです。

このブログではslickというプラグインを使った実装を多くご紹介していますが、もう1つ有名なスライダープラグインがあります。

それがSwiperです。

今回はSwiperを使った基本的なスライダーの実装方法を解説していきます。

今だけ！5大無料特典あり🎁

コーディングの時給アップにはこちら！

累計1100部突破！レビュー570件！

スライダープラグイン『Swiper』とは？

Swiper公式サイト

Swiperとは、スライダーが作れるJavaScriptのプラグインになります。

スライダーを実装する場合は、自作よりこういったプラグインを使うと簡単です。

スライダーを実装するときは『Swiper』か『slick』を使う人が多いと思います。

当ブログでは両方とも記事がたくさんあるので、分からない実装があれば参考にしてみて下さい。

関連記事slick記事一覧
関連記事Swiper記事一覧

Swiperとslickの違い

Swiperと同じくらい有名なスライダー系のプラグインがslickですが、大きな違いはjQuery依存か非依存かとなります。

そしてSwiperはjQuery非依存なので、jQueryなしでも使用可能です。

またSwiperはslickにはない様々なエフェクトが用意されています。

エフェクトを使った実装は以下の記事を参照下さい。

あわせて読みたい

: 【Swiper】スライダーのエフェクトまとめ
続きを見る

Swiperのメリット

jQueryに依存しない
利用者が多く分からないことは調べればすぐ分かる
スワイプしやすい（slickに比べて）
オプションの数が多くカスタマイズ性が高い
更新頻度が高い

jQueryに依存しない

これはslickとの違いでも書きましたが、SwiperはjQuery不要なので、jQueryが使えない案件でも使えます。

利用者が多く分からないことは調べればすぐ分かる

スライダーは色々とカスタマイズすることが多いですが、Swiperは利用者が多いので調べれば大抵のことはすぐ分かります。

当ブログでもSwiperの記事はたくさんあるので、ぜひ参考にしてみて下さい。

スワイプしやすい（slickに比べて）

slickはほぼ真横にスワイプしないとスライドが切り替わりませんが、Swiperは多少斜めにスワイプしても切り替わります。

スマホで試してみると分かると思うので、ぜひ試してみて下さい。

まずはslickがこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

そしてこちらがSwiperです。

See the Pen
Swiper（矢印、ドットインジケーター、スクロールバー） by junpei (@junpei-sugiyama)
on CodePen.

オプションの数が多くカスタマイズ性が高い

Swiperはオプションの数が豊富なので、カスタマイズ性が非常に高いです。

オプションについては以下の記事で詳しく解説しています。

あわせて読みたい

: 【Swiper】カスタマイズ用オプションまとめ一覧
続きを見る

更新頻度が高い

slickは2017年10月から5年以上更新されていませんが、Swiperは今でも高頻度で更新を続けています。

slickが5年以上も更新していないのがちょっと不安になりますね・・・

Swiperのデメリット

公式ドキュメントが英語
容量が大きい
オプションが多すぎて全てを使いこなすのは難しい

公式ドキュメントが英語

公式サイトに載っているドキュメントが英語なので公式サイトで使い方を知るのはちょっと難しいかも知れませんが、当ブログを含め使い方を解説しているブログなどは多いため、普通に使う分には困らないと思います。

Swiper公式サイト

容量が大きい

slick、そしてもう一つのスライダーライブラリSplideとjsファイルの容量で比較してみます。

ライブラリ名	バージョン	容量
Splide	4.1.3	30KB
slick	1.8.1	43KB＋90KB（jQuery3.6.3）
Swiper	9.1.0	137KB

slickはjQueryも含めればSwiperとほぼ同じですが、Splideと比べると4倍以上となっています。

オプションが多すぎて全てを使いこなすのは難しい

オプションが多くてカスタマイズ性が高いのはメリットですが、同時に多すぎて使いこなすのが難しいとも言えます。

ただし全てのオプションを理解する必要はないので、よく使うものだけいつでも使えるようにしておけばOKです。

Swiperの導入方法

それでは早速Swiperを使ってスライダーを作っていきましょう。

手順は以下のようになります。

必要なファイルをDLして読み込む or CDNでライブラリを読み込む
HTMLでスライダーを動かすのに必要なclassを付けながらコードを書く
JavaScriptを書く

あとは必要に応じてCSSで調整したりJavaScriptにオプションを書いていきます。

Swiperのインストール方法①：CDNでライブラリを読み込む

Swiperを使うには主に2つの方法があります。

『ファイルをDLする』か『CDNでライブラリを読み込む』の2つの方法になります。

まずはCDNの方ですが、以下のコードをheadタグとbody閉じタグ直前に書きます。

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

CSSの方はheadタグ、JavaScriptの方はbody閉じタグ直前に書きましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>タイトル</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
    />
  </head>
  <body>
    <main></main>
    <footer></footer>
    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
  </body>
</html>

CDNの最新バージョンはこちらに載っているので、コピーして使いましょう。

https://swiperjs.com/get-started#use-swiper-from-cdn

CDNの記載場所

Swiperのインストール方法②：ファイルをダウンロード

ファイルをDLして読み込みたい場合は、以下にアクセスしてコードをコピーして下さい。

右上にある『View Raw』をクリックすればコードが全部表示されます。

swiper-bundle.min.css

swiper-bundle.min.js

注意ポイント

上記は2023年3月4日現在の最新バージョン9.1.0が表示されます。

上記URLからアクセスした際は最新版を選択するようにしましょう。

Swiperの書き方

Swiperを使う準備ができたら、次はコードを書いていきます。

HTMLの書き方

次はHTMLを書いていきます。

最初は出来る限りシンプルなスライダーを作っていきます。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="画像パス" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="画像パス" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="画像パス" alt="" />
    </div>
  </div>
</div>

画像が3枚あるスライダーです。

slickと違い、class名を変えると動かないのでご注意ください。

注意ポイント

今回はバージョン9を使用していますが、Ver6からVer7に変わった際にこの動作に関わるclass名が"swiper-container"から"swiper"に変わり、スライダーが急に動かなくなったとTwitter上でも軽い騒ぎになりました。なのでVerには最新の注意を払うか、CDNではなくファイルをDLして読み込むようにしましょう。

ただ試しに一番大枠のswiperのclass名はJavaScriptも同様に変えれば動きました・・・が、上記のような騒動もあったのでなるべくclass名は公式ページに書いてある通りにしておきましょう（swiper-wrapperとswiper-slide は変えたら動かなくなりました）

CSSの書き方

これは書かなくても動きますが、とりあえず画像サイズだけ整えておきます。

.swiper-slide img {
  height: auto;
  width: 100%;
}

JavaScriptの書き方

最後にJavaScriptを書きます。

これも一旦最小限のコードにします。

const swiper = new Swiper(".swiper", {});

ここまで書けたら一旦スライダーが機能するか試してみましょう。

こちらがここまでのコードで実装したスライダーです。

See the Pen
Swiper（最小限のコード） by junpei (@junpei-sugiyama)
on CodePen.

一応動いてはいるので、Swiperは正常に機能しているという確認が出来ました（横にスワイプ・ドラッグしてみて下さい）

あとはもう少しカスタマイズしてみましょう。

Swiperでよく使うオプションとカスタマイズ方法

Swiperにはたくさんのオプションがありますが、よく使うオプションをご紹介します。

オプションにはパラメータとモジュールがあり、似たようなものですが書き方が少し異なります。

const swiper = new Swiper(".swiper", {
  パラメータ名1: 設定値,
  パラメータ名2: 設定値,
  モジュール名1: {
    パラメータ名A: 設定値,
    パラメータ名B: 設定値,
  },
});

オプションを詳しく知りたい人はこちらの記事を参照下さい。

あわせて読みたい

: 【Swiper】カスタマイズ用オプションまとめ一覧
続きを見る

それではよく使うパラメータ・モジュールをまとめて解説していきます。

最後にエフェクト以外全部設定したスライダーのデモを載せています。

ループ

デフォルトでは最後のスライドが表示されたら行き止まりなので、これをずっとスライドさせ続けるにはloopを設定する必要があります。

const swiper = new Swiper(".swiper", {
  loop: true, // デフォルトはfalse
});

最後のスライドの次は最初のスライドが表示されます。

前後の矢印（ナビゲーション）

次へ・前への矢印はHTMLで表示させ、JavaScriptで動作させます。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="画像パス" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="画像パス" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="画像パス" alt="" />
    </div>
  </div>
  <!-- 前後の矢印 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

const swiper = new Swiper(".swiper", {
  // 前後の矢印
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

JavaScriptでモジュールを書かないと、表示はされても動かないのでご注意下さい。

ドットインジケーター（ページネーション）

これはスライドの下に表示される●になります。

これもHTMLとJavaScript両方書く必要があります。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="画像パス" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="画像パス" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="画像パス" alt="" />
    </div>
  </div>
  <!-- ページネーション -->
  <div class="swiper-pagination"></div>
</div>

const swiper = new Swiper(".swiper", {
  // ページネーション
  pagination: {
    el: ".swiper-pagination",
    clickable: true, // クリック有効化
  },
});

clickable: true,は必須ではありませんが、これを有効化しておくとドットをクリックすれば該当のスライドに遷移します。

スクロールバー

これはあまり使わないかも知れませんが、これもHTMLを書く必要があるのでご紹介しておきます。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="画像パス" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="画像パス" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="画像パス" alt="" />
    </div>
  </div>
  <!-- スクロールバー -->
  <div class="swiper-scrollbar"></div>
</div>

const swiper = new Swiper(".swiper", {
  // スクロールバー
  scrollbar: {
    el: ".swiper-scrollbar"
  },
});

自動再生

デフォルトでは自動再生されないので、させたい場合はオプションを書く必要があります。

const swiper = new Swiper(".swiper", {
  autoplay: true, // 自動再生
});

パラメータを追記して細かい設定をすることも可能です。

const swiper = new Swiper(".swiper", {
  autoplay: { // 自動再生
    delay: 1000, // 1秒後に次のスライド（初期値：3000）
    disableOnInteraction: false, // 矢印をクリックしても自動再生を止めない
  },
});

フェード（エフェクト）

エフェクトは何種類かありますが、特によく使うのがフェードです（デフォルトはスライド）

const swiper = new Swiper(".swiper", {
  effect: 'fade', // フェード
});

エフェクトについては以下の記事で詳しく解説しています。

あわせて読みたい

: 【Swiper】スライダーのエフェクトまとめ
続きを見る

レスポンシブ

これはブレイクポイントを指定してPCでは3枚、スマホでは1枚という感じで設定できます。

const swiper = new Swiper(".swiper", {
  // スライドの表示枚数
  slidesPerView: 1,
  breakpoints: {
    // スライドの表示枚数：500px以上の場合
    500: {
      slidesPerView: 3,
    }
  }
});

この場合は画面幅が500px以上でスライド3枚、500px未満でスライド1枚になります。

そしてここまでの解説でエフェクトのフェード以外を全て取り入れたのがこちらです。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

Swiperが動かない時の主な原因と対処方法

最後にSwiperが動かない時の主な原因と対処方法を解説します。

SwiperのCSSとJavaScriptを読み込んでいない
ファイルを読み込む順番を間違えている
HTML、もしくはJavaScriptの片方しか書いていない
class名を変更してしまっている
オプションの最後にカンマ（,）が抜けている
''（シングルクォーテーション）""（ダブルクォーテーション）が抜けている

SwiperのCSSとJavaScriptを読み込んでいない

これはファイルをダウンロードして読み込むかCDNで読み込みますが、これを書いていない、もしくはコードやファイルへのパスが間違っている可能性があります。

ファイルをダウンロードして読み込む場合はファイルへのパスが合っているか確認しましょう。

CSSとJavaScriptのどちらかが無いと動かないので、そこも注意しましょう。

ファイルを読み込む順番を間違えている

SwiperのCDNを読み込むコードと、自分でオプションなどを書いたファイルを読み込むコードがありますが、これは最初にCDNの方を読み込みましょう。

    <!-- SwiperのCDNファイル -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <!-- Swiperの設定ファイル -->
    <script src="js/main.js"></script>
  </body>
</html>

これが以下のようになっていると動きません。

    <!-- Swiperの設定ファイル -->
    <script src="js/main.js"></script>    
    <!-- SwiperのCDNファイル -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
  </body>
</html>

HTML、もしくはJavaScriptの片方しか書いていない

これは実装する物によりますが、例えばページネーションや矢印などはHTMLにコードを書く必要があります。

そしてJavaScriptにもコードを書く必要があるので、片方書いていないと動きません（もしくは表示されない）

class名を変更してしまっている

これは先ほど解説しましたが、class名は決められているので変更しないようにしましょう。

オプションの最後にカンマ（,）が抜けている

これは見落とす可能性が高いですが、オプションが複数ある場合は最後のオプション以外はカンマが必要です。

const swiper = new Swiper(".swiper", {
  loop: true,
  speed: 1500
});

上記の場合はloop: true,の部分になります。

これが以下の場合だと動きません。

const swiper = new Swiper(".swiper", {
  loop: true
  speed: 1500
});

もしオプションが1つしかなければカンマはなくてもOKです。

const swiper = new Swiper(".swiper", {
  loop: true
});

逆に最後のオプションにもカンマはあっても問題ないので、基本的には全てカンマを入れておいた方がミスは防ぎやすいかと思います。

const swiper = new Swiper(".swiper", {
  loop: true,
  speed: 1500,
});

''（シングルクォーテーション）""（ダブルクォーテーション）が抜けている

オプションによってはシングルクォーテーションかダブルクォーテーションが必要な場合があります。

例えばエフェクトは以下のように書かないと動きません。

const swiper = new Swiper(".swiper", {
  effect: "fade",
});

このようにするとNGです。

const swiper = new Swiper(".swiper", {
  effect: fade,
});

他にもスペルミスや書き間違えがないか落ち着いて確認していきましょう。

まとめ

今回はSwiperの導入方法・書き方など基本的な使い方について解説してきました。

少しご紹介したオプションなどを使えばかなり幅広い実装が可能です。

今回ご紹介した実装例以外にも以下の記事でたくさんの実装例を載せているので、ぜひ参考にしてみて下さい。

あわせて読みたい

: Swiperスライダー実装まとめ23選【サンプル付き】
続きを見る

以上になります。

関連記事slick記事一覧
関連記事Swiper記事一覧

コーディングの時給と作業効率を上げる！

2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。

コピペで使えるWordPressの各テンプレート
実務でよく使う見出し一覧
実務でよく使うテキストのhoverアニメーション
実務でよく使うボタン内の矢印9種類
Contact Form 7の色々・・・

などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。

さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。

1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ！5大無料特典あり🎁

販売ページとレビューを見てみる

Twitterのレビューはこちら

【2023年最新Ver9】Swiperの使い方とよく使うオプション・カスタマイズ方法を解説

スライダープラグイン『Swiper』とは？

Swiperとslickの違い

【Swiper】スライダーのエフェクトまとめ

Swiperのメリット

jQueryに依存しない

利用者が多く分からないことは調べればすぐ分かる

スワイプしやすい（slickに比べて）

オプションの数が多くカスタマイズ性が高い

【Swiper】カスタマイズ用オプションまとめ一覧

更新頻度が高い

Swiperのデメリット

公式ドキュメントが英語

容量が大きい

オプションが多すぎて全てを使いこなすのは難しい

Swiperの導入方法

Swiperのインストール方法①：CDNでライブラリを読み込む

Swiperのインストール方法②：ファイルをダウンロード

Swiperの書き方

HTMLの書き方

CSSの書き方

JavaScriptの書き方

Swiperでよく使うオプションとカスタマイズ方法

【Swiper】カスタマイズ用オプションまとめ一覧

ループ

前後の矢印（ナビゲーション）

ドットインジケーター（ページネーション）

スクロールバー

自動再生

フェード（エフェクト）

【Swiper】スライダーのエフェクトまとめ

レスポンシブ

Swiperが動かない時の主な原因と対処方法

SwiperのCSSとJavaScriptを読み込んでいない

ファイルを読み込む順番を間違えている

HTML、もしくはJavaScriptの片方しか書いていない

class名を変更してしまっている

オプションの最後にカンマ（,）が抜けている

''（シングルクォーテーション）""（ダブルクォーテーション）が抜けている

まとめ

Swiperスライダー実装まとめ23選【サンプル付き】