2022/1/28 （更新日: 2022/5/14）

【2022年版】スライダープラグイン「Swiper」の使い方【基礎編】

Coding

Swiperってどうやって実装するの？

そんな疑問にお答えします。

スライダーはプラグインを使えば簡単に実装できます。

いろんなスライダープラグインがありますが、今回はその中でも人気の高い「Swiper」を紹介します。

Swiperは、jQueryに依存しないJavaScriptライブラリです。

レスポンシブ対応可能でカスタマイズの自由度も高いです。

パラメータが豊富で非常に凝ったスライドショーもに簡単に実装できます。

Swiperを自在に操れれば、たいていのスライダーは実装できるはず。

しっかり使い方をマスターしておきましょう。

1 「Swiper」のメリット・デメリット
2 「Swiper」の使い方【バージョン7】

「Swiper」のメリット・デメリット

まず使い方に入る前にSwiperの特徴や使うことによるメリット・デメリットを見ておきましょう。

Swiperのメリット

jQueryが不要
カスタマイズ性に優れている
レスポンシブ対応していて、スマホイベントのタッチ、スワイプ、タップなども使える

Swiperのデメリット

古いブラウザには対応していない
Swiper バージョン5以降はIE対象外
公式ドキュメントは英語しかない

「Swiper」の使い方【バージョン7】

それではSwiperの使い方を見ていきましょう。

ライブラリの読み込み

※バージョン7の情報になります。

バージョン違いに注意！

・Swiper のバージョン7 からHTMLの記述の中で「.swiper-container」が「.swiper」に変更されています。

・昔の解説記事を参考にする場合はクラス名が古いままですので気をつけましょう。

Swiper を使用するには、<head></head>内にCSSと、</body>の前にメインのJavaScriptファイルを読み込みます。

ライブラリ自体をダウンロードするか、CDN経由のどちらでもOKです。

今回はCDNから読み込みます。

Swiper公式サイト

公式サイト→Get Startedをクリック

Swiper公式の画面

CDNをコピペ

Swiper公式の画面

<head></head>に「swiper-bundle.min.css」を、</body>直前に「swiper-bundle.min.js」を設置

CSS

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

JavaScript

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

基本形

<!-- Swiper START -->
<!-- スライダー全体をくくるメインコンテナ（必須） -->
<div class="swiper">
    <!-- 全スライドをまとめるラッパー（必須） -->
    <div class="swiper-wrapper">
        <!-- 各スライド（必須） -->
        <div class="swiper-slide">Slide A</div>
        <div class="swiper-slide">Slide B</div>
        <div class="swiper-slide">Slide C</div>
        <div class="swiper-slide">Slide D</div>
    </div>
</div>
<!-- Swiper END -->

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

どんなレイアウトであってもこの基本形だけは崩してはいけません。

念のため、HTML全体を貼っておきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DEMO</title>
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
</head>
  <body>
    <!-- Swiper START -->
    <!-- スライダー全体をくくるメインコンテナ（必須） -->
    <div class="swiper">
        <!-- 全スライドをまとめるラッパー（必須） -->
        <div class="swiper-wrapper">
            <!-- 各スライド（必須） -->
            <div class="swiper-slide">Slide A</div>
            <div class="swiper-slide">Slide B</div>
            <div class="swiper-slide">Slide C</div>
            <div class="swiper-slide">Slide D</div>
        </div>
    </div>
<!-- Swiper END -->
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<script>
  var mySwiper = new Swiper(".swiper", {
});
</script>
  </body>
</html>

実際に動かすと下のようになります。

左右にスワイプさせるとスライドが切り替わります。

See the Pen
スライダー1 by toshi (@toshi78)
on CodePen.

以上が基本形です。

必ずこの時点で動作確認は行いましょう。

やりがちなのはいろんな機能をつけた上で一度目の動作確認を行うことです。

それで動けば何の問題もありませんが、動かなければ困ったことになります。

どこがエラーの原因なのかがわからなくなるからです。

この時点で動かないのであれば次の理由であることが高いです。

💡ポイント　スライダーが動かないときはここを確認！　

JS、CSSが正しく読み込めていない
JSを読み込む順番に誤りがある
HTML、JSの記述誤り、記述もれ

だいたいは単純なミスであることが多いのでしっかり確認しましょう。

前・次ボタンをつける

基本形だけだとシンプルすぎてスライダーであることがわかりづらいです。

そこで前後にスライドさせるボタンをつけてみます。

<!-- Swiper START -->
<!-- スライダー全体をくくるメインコンテナ（必須） -->
<div class="swiper">
    <!-- 全スライドをまとめるラッパー（必須） -->
    <div class="swiper-wrapper">
        <!-- 各スライド（必須） -->
        <div class="swiper-slide">Slide A</div>
        <div class="swiper-slide">Slide B</div>
        <div class="swiper-slide">Slide C</div>
        <div class="swiper-slide">Slide D</div>
    </div>
    <!-- 前・次ボタン -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<!-- Swiper END -->

var mySwiper = new Swiper(".swiper", {
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    }
});

See the Pen
スライダー2 by toshi (@toshi78)
on CodePen.

スライダーぽくなりました。

次回はいろんなオプション設定を見ていきます。

2022年版】スライダープラグイン「Swiper」の使い方【オプション設定編】

コメントを残すコメントをキャンセル

投稿者トシ