【2022最新】スライダープラグイン Swiper.jsの使い方

Web制作（コーディング）を学習していくと画像などをスライドさせる方法について学ぶ機会が訪れると思いますが、その中で今回はもっとも代表的なスライダーの一つであるSwiperの使い方について解説していきます。

ライブラリをCDNで読み込む
HTML
CSS
JavaScript
SwiperはJQueryに依存しない
ページネーションや前後にスライドするボタンの設置

ライブラリをCDNで読み込む

Swiperを使うには

NPMからインストールする
アセット（資源）をダウンロードする
CDNを読み込む

の３つの方法がありますが、今回はCDNで読み込む方法で解説していきます。

てかそれがややこしくなくて一番簡単です。以下のhtmlコードをコピペして、<head><head>タグの間に貼り付けます。

<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>

参照：CDN読み込みリンク（公式サイト）

そして以下の<script>コードは<body>タグの閉じタグ</body>の直前に貼り付けます。
ちなみになぜ<body>タグの直前に貼り付けるのかはこちらの記事で解説しています。

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

なお2022年3月以降は最新のver.8がリリースされていますが、ver.7と8の間に大きな違いはないです。

公式を読むとSwiper Angular（JavaScriptのフレームワーク）におけるイベント処理の仕方に違いがあるそうですが、少なくともWeb制作をすることに関しては気にすることはないです。ただしver.6から7の間にはclass名で変更がある（swiper-container が swiperに変更）ので注意が必要です。（つまりclass名を間違えると動作しない可能性がある）

ver.6から7への移行ガイド（公式サイト）
ver.7から8への移行ガイド（公式サイト）

HTML

次にスライダーの型枠となる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名は変更しないようにしましょう。変更してしまうと正しく動作しません。ただしclass名やid名の追加はOKです。

CSS

CSSはimgの大きさだけ調整します。

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

JavaScript

最後にJavaScriptの初期化コード（これから使いますよ、という宣言みたいなもの）を<body>タグ直前の<script>タグ、もしくはJavaScript用の別ファイルの中に記述します。

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

ここまで記述したら一旦スライダーが動くかどうか確認してみましょう。

この段階で確認をお勧めするのは、作業行程の早い段階で都度確認を行えばエラーの原因を把握しやすいのと、後になればなるほど動作がうまくいかない時の原因究明に時間がかかり、無駄な時間ロスを生んでしまいかねないからです。

以下はこれまでのコードで実装したスライダーです。

See the Pen Untitled by Takuma (@takushin0202) on CodePen.

ちなみにこの時点でスライダーが動かない場合は、

CDNが最新verなのに、古いHTMLの型（上述したver.6のswiper-containerのHTML）を使っている
JSを読み込む順に誤りがある（ライブラリコードがJSファイルより後に記載されてる）

等が考えられるのでもう一度見直してみることをお勧めします。

SwiperはJQueryに依存しない

今までJQueryを学習してきた身だと、$(function(){});は要らないのか？と思ってしまいますが、SwiperはJQueryに依存せずに動作しますので、上の初期化コードのみで問題なく動きます。

ページネーションや前後にスライドするボタンの設置

ここに画像を前後にスライドさせるボタンや、スライダーの現在地を示すページネーションを設置してみます。

<div class="swiper">
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1
      <img src="画像パス" alt="">
    </div>
    <div class="swiper-slide">Slide 2
      <img src="画像パス" alt="">
    </div>
    <div class="swiper-slide">Slide 3
      <img src="画像パス" alt="">
    </div>
  </div>

  <!-- ページネーション -->
  <div class="swiper-pagination"></div>
  <!-- 戻るボタンと進むボタン -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

const swiper = new Swiper(".swiper", {
  // ページネーション
  pagination: {
    el: ".swiper-pagination"
  },
  // ボタン
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});

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

See the Pen Untitled by Takuma (@takushin0202) on CodePen.

以上で基本的なSwiperの実装となりますが、このままの見た目のボタンやページネーションで使用する人はあまりいないかと思いますので、別の記事にてページネーションのカスタムなどについて記載しています。

【Swiper】前後のスライド矢印のカスタマイズ方法