『Swiper.js (v.11)』の使い方基礎! オプション・カスタマイズの始め方も教えます

by TAKADA

｜ 10492 PV ｜ 2024.01.05

favorite_border

手軽にスライダー、スライドショーを実装できる人気のJSプラグイン『Swiper』。JavaScriptの勉強は始めたばかり、苦手という方でも、すぐに本格的なスライダーが作れます。

コーディング初心者の方でも取り入れられるよう、基本的な使い方を中心に解説します。
本記事と一緒に公式サイトを確認する習慣をつけると、コピペに頼らず、思った形にカスタマイズも出来るようになっていきますよ！

Swiper.jsとは

Swiper（Swiper.js）とは簡単にスライダーが作れるJavaScriptのプラグインです。

スライダーは、人によってスライドショーやカルーセルとも呼ばれる、1つの範囲内で表示するコンテンツを切り替えられる機能のこと。フロントページのトップや、お知らせ・更新情報の表示など、様々な用途で使用されています。

このスライドショー（スライダー）機能、イチからJavaScriptを書くとめちゃくちゃ大変。ですので、プラグインと呼ばれる「基本のコードを読み込ませておいて、欲しい機能・表示させたい内容だけ書けば動く」ものが多く使われています。

数あるスライダー系プラグインの中でもSwiperは人気があり、世界的に利用者が多い存在。
人気の理由としては、主に以下４つが挙げられます。

  • 公式ドキュメントやデモが重質している
  • オプションが豊富で、カスタマイズ性が高い
  • レスポンシブ対応が簡単にできる
  • jQuery非依存

機能が豊富でカスタマイズ性が高いため、初心者には不向き（実装がやや難しい）と評されることもあります。が、実のところ基本を押さえれば、簡単にスライダーの実装やカスタマイズも出来ますよ。

基本の実装方法、コーディング初心者の方でも活用しやすいカスタマイズ方法を解説していきます。

まずは無料の14講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

Swiperの導入方法と基本コード

最初に、Swiper公式サイトに従って、基本のスライダーを実装してみましょう。
以下のページを開いて、「Get Started」をクリック。

https://swiperjs.com/

1.インストール

まず、Swiperを動かすためのファイルをInstallation（インストール/読み込み）します。
Swiperでは、以下3つの方法が用意されています。

  • npm経由のインストール
  • CDNで読み込む
  • 必要ファイルをDLして読み込む

とりあえず、最も手軽に使えるCDN版を使ってみましょう。
左のローカルメニューから、Use Swiper from CDNを選択。

CDN用のコードが表示されます。
CSSとJS、２つのコードをHTMLファイルに貼り付けてみましょう。

特に理由がない場合は、CSSを読み込むlinkタグはhead内に、JavaScriptを読み込むscriptタグは</body>の上に書くと良いです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swiperお試し</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
</head>
<body>


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

HTMLテンプレート（+CSS）を記述

公式サイトで、次の項目はAdd Swiper HTML Layout。

Swiperでスライダーを表示するための、基本的なHTMLレイアウトを追加しましょうということです。

デモコードがあるので、そのままコピーして貼り付けちゃいましょう。

その下はSwiper CSS Styles/Size。
こちらは状況に応じて必要…というような紹介文。とりあえずデモコードで動かしてみよう、と思う場合は、あったほうが見やすいのでコピーして追加しておきましょう。

簡単にHTML貼り付けた場合、こんな感じ。
もちろん、別途style.cssなどを用意して、そちらに書いても構いません。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swiperお試し</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
    <style>
        .swiper {
          width: 600px;
          height: 300px;
        }
    </style>
</head>
<body>
    <!-- Slider main container -->
    <div class="swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            ...
        </div>
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- If we need scrollbar -->
        <div class="swiper-scrollbar"></div>
    </div>

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

Swiperを初期化

最後、Initialize Swiper。
スライダーを動かすために、JSでSwiperを初期化します。

こちらも掲載されているコードを、コピー・アンド・ペーストすればOK。
JSファイルを作っている方はそちらに、HTMLファイル1つでお試しする場合は<script>タグで囲んで書きましょう。

      ...略...
      <!-- If we need scrollbar -->
      <div class="swiper-scrollbar"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper', {
          // Optional parameters
          direction: 'vertical',
          loop: true,

          // If we need pagination
          pagination: {
            el: '.swiper-pagination',
          },

          // Navigation arrows
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },

          // And if we need scrollbar
          scrollbar: {
            el: '.swiper-scrollbar',
          },
        });
    </script>   
</body>

上書き保存して、ブラウザでスライダーが動いているか確認。

……なんか思ってたのと違う。
と、なるかもしれませんが、動いていれば基本導入は成功です！

Swiperの基本構造

Swiperスライダーを実装するために必要なHTML要素、JavaScriptのオプションの役割を見ていきましょう。

どちらも、完全に覚えないと使えない、というものではありません。
自分の実装したいスライダーに近づけられるよう、どこをカスタマイズすればよいか把握できればOKです。

SwiperのHTML構造

Swiperのスライダーを構成するHTMLの構造、クラス名を見ていきましょう。
デモコードはコメントが付いており、クラス名もそのものズバリなので分かりやすいです。

コメントで「If we need（もし必要なら）と」書かれている部分、図の4～6番は非必須。不要なら削除しても問題ありません。

番号 CSSクラス名 役割
1 .swiper
（必須） 		スライダー全体を囲むクラス。
設定した範囲の中にある子要素のみを表示しています。
2 .swiper-wrapper
（必須） 		スライド（.swiper-slide）を囲むための要素・クラス。
CSSのtransform: translateで移動することで、見える範囲を変える＝スライダーの動きを作っています。
3 .swiper-slide
（必須） 		スライドで表示させたい要素、1つ1つを入れる枠。
サイズなどswiper.js側で設定されるため、.swiper-slideに直接スタイル指定はしないほうが確実。
4 .swiper-pagination ページネーションを表示する
5 .swiper-button-prev
.swiper-button-next 		前のスライドに移動する < ボタン
次のスライドに移動する > ボタンを表示
6 .swiper-scrollbar スクロールバーを表示する

SwiperのHTML、クラスをイチから書ける必要はありません。
最低限必要な要素、見た目をカスタマイズしたいときにCSSセレクタに使うクラス名が分かればOKです。

JSの記述（オプション）について

次に、scriptタグの方を見てください。

公式サイトからコピー・アンド・ペーストしてきたコードは、結構長いですよね。
ですが、最低限必要なのは、下図、赤線で囲った部分（2行）だけ。
この部分で、Swiperの初期化は出来ています。

波括弧{ } の内側に書かれているのは、オプションと呼ばれている部分。
Swiperが用意してくれているパラメータと値を入力することで、「スライドの向きは縦方向」や「ナビゲーションを表示する」など、どんなスライダーにしたいのか指定できます。

試しに、コピーしてきたコードを変えてみましょう。
以下の2つパラメータと値をコメントアウトします。

  • direction（verticalで、スライドを垂直方向に指示）
  • scrollbar（swiper-scrollbarクラスの要素にスクロールバーを表示する）


スクロールバーなし・横スライドのスライダーになる……かと思いきや、スライダーっぽいものは表示されたまま。
これはHTMLでdiv.swiper-scrollbarが残っているためです。
HTMLでスクロールバーのベースになる薄灰色の部分、JSで現在のスライド位置である青色の部分を作っているようです。

HTML要素の方もコメントアウトすると、よくあるシンプルなスライダーへ変更完了。

Swiperオプションの調べ方

Swiperオプションで使えるパラメータと、パラメータ値の書き方はSwiper公式サイトの中の“Swiper API”ページで確認できます。
左のローカルメニューからParametersを選ぶと、パラメータ一覧が表示されます。

Swiper公式サイト / Swiper API
https://swiperjs.com/swiper-api#parameters

また、それぞれのモジュール（スライダーの構成パーツ）には、更に細かなオプション設定も用意されています。左メニュー“Modules”のグループで確認できます。
ページネーションのところを見てみましょう。

https://swiperjs.com/swiper-api#pagination

赤い点線で囲った部分は、ページネーションの ● をクリックして、スライドを切り替えられるかの設定。デフォルトだとfalse（操作できない）になっています。
操作可能になるようtrueで設定してみましょう。

// If we need pagination
pagination: {
    el: '.swiper-pagination',
    clickable: true, 
},


このように、必要な機能を追加・削除していくことで、様々なバリエーションのスライダーを作成できることがSwiperの特徴です。

ただ、パラメータを逐一探して書いていくのは大変ですよね。
以下で紹介するDemosを活用すると、手作りたいスライダーに近い形から調整ができるので手軽です。何を書いていけば良いかわからない、という場合は、Demosを見てみましょう。

Swiper Demosとカスタマイズ

Swiperでは、よく使われるスライダー、スライダー設定のデモが公開されています。
JS設定だけではなく、CSSも付いていて便利なので活用してみましょう。

Swiper公式サイト / Swiper Demos
https://swiperjs.com/demos

Swiper Demosの基本的な使い方と、生徒様・クライアント様からご要望が多いカスタマイズ方法を、以下3つのスライダーバリエーションで紹介します。

1.スライドを複数枚ずつ表示する
2.レスポンシブ対応にする
3.自動再生とループ

1. スライドを複数枚表示する

基本のSwiperスライダーは、スライドの要素（.swiper-slide）が1つずつ表示されます。
下図のように複数のスライド要素が見える形のスライダーに変更してみます。

Swiper Demosにあるコードを使ってみましょう。

Swiper Demosページの左メニューから『Slides per view』を選択。
Coreと書かれているリンクを開きます。

CodeSandboxというWebエディターが開きます。
左側のファイル一覧からindex.htmlを開いてください。


右側のプレビュー表示に必要な記述が、1ファイル内に全て書かれています。

空のHTMLファイルを用意して、1行目から最終行まで全部コピー・アンド・ペースト。

保存してブラウザで表示します。
スライド要素（div.swiper-slide）が3つずつ表示され、ドラッグもしくはページネーションのクリックで切り替わればOK。

scriptタグ内のオプション設定は、以下のようになっています。
値の数字を変えれば、表示するスライド数や間隔を変更できます。

基本コードの時に登場したnavigationパラメータとHTML要素を加えると、ナビゲーション（前後切り替え）も表示できます。

CSSでカスタマイズする

スライダーの大きさや表示位置、スライドのデザイン、ページネーションやナビゲーションの色などはCSSを追加していきます。必要に応じてHTML要素、クラス名も加えてOK。
このあたりは通常のコーディングです。

例えば、div.swiper-slideの子要素に、オリジナルのクラス（下記ではswiper-card）を設定。
その中で構成・デザインを作っていくとやりやすいかと思います。

<div class="swiper mySwiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="swiper-card">
                <img class="swiper-card_img" src="https://swiperjs.com/demos/images/nature-1.jpg" alt="">
                Slide 1
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper-card">
                <img class="swiper-card_img" src="https://swiperjs.com/demos/images/nature-2.jpg" alt="">
                Slide 2
            </div>
        </div>
        ...

*{
    box-sizing: border-box;
}
body {
    background: #eee;
}

.swiper {
    width: 100%;
    max-width: 800px;
    height: 360px;
    margin: 0 auto;
    padding: 0 20px;
}

.swiper-card{
    width: 100%;
    height: 100%;
    padding: 1rem;
    text-align: center;
    background-color: #FFF;    
}

.swiper-card_img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
}

HTMLファイル上にはない疑似要素や、JS側で出力されるCSSもあります。
CSSを追加・上書きするセレクタは、検証ツールを使って探すと良いでしょう。

/* 前後ボタンの色 */
.swiper-button-next::after,
.swiper-button-prev::after{
    color: #FF6699;
}

/* ページネーション現在地の色 */
.swiper-pagination-bullet-active{
    background-color: #FF6699;
}

2. レスポンシブ対応（breakpointsの設定）

スマホのように表示幅が狭い時は一度に見えるスライド要素の数を少なく、PCモニターなど広いときは多くしたい。…と、表示領域に合わせた設定を行いたい場面もあります。
こうしたレスポンシブな設定には、breakpointsのパラメータを使います。

Swiper Demosだと『Responsive breakpoints』がレスポンシブ対応コード。

Swiper APIでは、Parameters一覧の中にあるbreakpointsで確認できます。

breakpointsは、CSSメディアクエリ@media(min-width: 〇〇px)のようなイメージ。
320: { } の中に書いた指示は、表示領域が幅320px以上なら適用されます。

また、slidesPerViewは小数点以下の指定もできます。
小数点以下の設定をすると、前後のスライドを少しずつ見せることが出来ます。

centeredSlides: true,を加えると、アクティブなスライドを中央に配置することが出来ます。表示スライド数を小数点以下で指定する場合は、設定しておいたほうが綺麗に見えます。

var swiper = new Swiper(".mySwiper", {
    pagination: { // ページネーションの表示
        el: ".swiper-pagination",
        clickable: true,
    },
    navigation: { // ナビゲーションボタンの表示
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    centeredSlides: true, //アクティブなスライドを中央に配置
    breakpoints: {
        320: { // 画面幅320px以上のとき
            slidesPerView: 1.4,
            spaceBetween: 20,
        },
        640: {  // 画面幅640px以上のとき
            slidesPerView: 2.2,
            spaceBetween: 30,
        },
        1200: {  // 画面幅1200px以上のとき
            slidesPerView: 3,
        },
    },
});

3. 自動再生とループ

スライダーは動作するものの、ユーザーがアクションをしてくれない限り停止しています。
何もしなくても、自動的に動くように設定します。

Swiper Demosにある『Autoplay』のコードを見てみましょう。

scriptタグの中、下図赤線で囲ったところが自動再生の設定です。

autoplay: { //自動再生の設定
    delay: 2500,
    disableOnInteraction: false,
},

delayはスライド切替えの秒数です。想像できた方も多いのではないでしょうか。
その下にあるdisableOnInteractionは、分からないのでSwiper APIで調べてみます。

https://swiperjs.com/demos#autoplay

falseを指定すると、ユーザーが操作 (スワイプ) した後も自動再生が無効化されないと書かれています。そのまま使っちゃって良さそうですね。
delayはお好みに合わせて増減してみてください。

ここまでカスタマイズしてきたスライダー、最初と最後がちょっと半端な印象です。
最後まで見てしまうと、AutoplayではSlide1に巻き戻るものの、次へボタンは効きません。

Slide 9の次をSlide 1に、Slide 1の前をSlide 9になるようにします。
方法はloopパラメータを追加するだけです。

loop: true, // .swiper-slideをループさせる

ちなみに、loopはSwiper Demosの『Infinite loop』で使われています。

今回のように2段階で進めると、コーディング初心者の方もSwiperを扱いやすいと思います。
1.実装したいスライダーに近い（必要機能が使われている）デモコードをもらう
2.わからないところはSwiper APIで調べる

行ったりきたり面倒くさい、と思われるかもしれませんが、この手順に慣れると、多くのライブラリ、プラグイン、フレームワークと呼ばれるものを使いこなせるようになります。コピペだけでは限界があるので、自分で調べるという一手間で、経験値を積んでいきましょう。

まずは無料で14講座から始めましょう！

ハイクオリティな14講座/98レッスンが受け放題。
募集人数には制限があります。サインアップはお早めに。
無料申し込み期限
4月28日まで
募集 人数
100名 (残りわずか)

こちらもオススメ

JavaScriptの書き方入門 - はじめてのWebデザイン【図解たっぷり】

0 PV ｜ 2021.09.02

favorite_border

厳選！Javascriptの入門で役に立つ10サイト+1

0 PV ｜ 2019.08.15

favorite_border

Skillhubの購読にはFacebookが便利です

Skillhub [スキルハブ]

mail: support@skillhub.jp
■お問い合わせ
■スキルハブの受託開発サービス
※開発のご依頼はここからお願いします。
×