Swiper.jsの使い方とカスタマイズ方法

Webサイトを開発していると必ずと言っていいほどスライダーを作る機会が出てくると思います。
そんな時の一つの選択としてSwiper.jsはおすすめのライブラリと言えます。

jQuery非依存で、オプション豊富で、カスタマイズ性が高く、世界的にも使われている、そんなSwiper.jsの基本的な使い方からカスタマイズ方法、人気のスライダーまで解説していきます！

Swiper.jsの特徴

Swiper.jsの特徴には以下のようなものがあります。

• jQueryを必要としない
• オプションが豊富
• レスポンシブ対応しやすい
• アニメーション効果をつけやすい
• 開発頻度が高い
• React、Vueにも対応

「脱jQuery」の動きが盛んな今、jQueryを必要としないSwiper.jsはありがたいですね。
jQueryを必要とするライブラリは避けれる傾向が強くなっていくと思いますが、Swiperは安心です。

また、Swiper.jsはオプションが豊富で、最新版ver11のオプションを数えてみたら117個ありました。
もちろん全部を覚える必要はないですが、オプションが豊富という事は作りたいものを実現しやすいのでありがたいです。
breakpointesオプションというものが用意されていて、レスポンシブ対応しやすかったり、effectオプションでアニメーション効果をつけやすいのもSwiper.jsのGoodポイントです。

Swiper.jsは開発が盛んに行われているようです。わたしが初めて使った2022年9月の時点では最新がver8だったのですが、1年少しでver11までリリースされています(2023年12月時点)。
開発が盛んという事はバグが修正されたり新しい機能が追加されたりするので、ライブラリを使う側としてはありがたいですね。

Swiper.jsのデメリット

Swiper.jsのデメリットとして、残念ながらファイルサイズが大きいという事が挙げられます。
参考用に他のスライダープラグインとの比較表を載せておきます。

ファイルサイズが大きいと読み込みに時間がかかり、サイトの表示速度が遅くなってしまいます。
しかし、下記で紹介してる方法でSwiper.jsの読み込みコストをゼロにしてこの弱点をカバーする事ができます。
Swiper.jsの読み込みコストをゼロにする

基本的な使い方を学んだ後、表示速度が気になる方はぜひ試してみてください。

Swiperを使う準備

Swiperを使うには以下の三つの方法がありますが、CDNが一番簡単に始められます。

・CDNを使用する
・ダウンロードする
・npmでインストールする

CDNの場合、ファイルに以下の2行を追加するだけで、Swiperを使う準備が完了します。

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

Swiperの基本的な使い方

ではSwiperの基本的な使い方を見ていきましょう。
上記で説明している『Swiperの準備』を忘れないようにしてください。
わかりやすいようにHTML・CSS・Javascriptと分けて進めていきます。

HTMLでパーツを用意する

ここではスライドのコンテンツを画像としております。
Swiperでは矢印やドットが必要な場合はHTMLに記述する必要があります。

<div class="swiper sample-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./img/sample1.png"></div>
        <div class="swiper-slide"><img src="./img/sample2.png"></div>
        <div class="swiper-slide"><img src="./img/sample3.png"></div>
        <div class="swiper-slide"><img src="./img/sample4.png"></div>
    </div>
    <div class="swiper-button-prev"></div>  <!-- 前へ戻る矢印が必要な場合 -->
    <div class="swiper-button-next"></div>  <!-- 次へ進む矢印が必要な場合 -->
    <div class="swiper-pagination"></div>   <!-- ドットが必要な場合 -->
</div>

CSSで見た目を整える

スライドの横幅は%で指定しておくと、画面サイズに合わせてスライダーの横幅も自動調整されるのでおすすめです。
あと画像を横幅いっぱいに広げておきましょう。

.sample-slider {
    width:70%;
}
.sample-slider img {
    width: 100%;
    vertical-align: bottom;
}

Javascriptでスライダーを作成

では、いよいよJavascriptでSwiperスライダーを作成してみましょう。
矢印とドットが必要な場合、Javascriptの方にも記述する必要があります。

const sampleSlider = new Swiper('.sample-slider', {
    // 矢印が必要な場合
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    // ドットが必要な場合
    pagination: {
        el: '.swiper-pagination',
    },
})

ここまでで、基本のスライダーが完成したのでデモを載せておきます。
次はよく使うオプションについて見ていきましょう。

矢印やドットをカスタマイズしたい場合は下記の記事が役に立つと思います。

★画像でカスタマイズ
【Swiper】ナビゲーション（矢印）を任意の画像でカスタマイズする方法
【Swiper】ページネーション（ドット）を任意の画像でカスタマイズする

★サイズ・位置・色を変更
Swiperスライダーの矢印のサイズや位置や色を変更する
Swiperスライダーのページネーションのサイズや位置や色を変更する

Swiperでよく使う基本的なオプション

Swiperにはオプションが多すぎるので、まずは高頻出な下記四つを見てみましょう。

オプションはすべてnew Swiper の第二引数に追加していきます。

new Swiper('.sample-slider', {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    pagination: {
        el: '.swiper-pagination',
    },
    // ここにオプションを追加していく
})

speedオプション

speedオプションでスライドスピードを指定する事ができます(単位はミリ秒)。
下記の場合だと4000ミリ秒=4秒かけてスライドが切り替わります。

new Swiper('.sample-slider', {
    speed: 4000,
})

スライドスピードがゆっくりになったと思うので、試してみてください。

loopオプション

loopオプションでスライダーをループ可能にすることができます。
ループ可能というのは一番最後のスライドが表示された後に、一番目のスライドがまた次に来るという意味になります。

new Swiper('.sample-slider', {
    loop: true,
})

ループ可能になったと思うので、試してみてください。

autoplayオプション

autoplayオプションでスライダーを自動再生させることができます。
delayには一つのスライドにとどまる時間をミリ秒で指定します。

new Swiper('.sample-slider', {
    autoplay: {
        delay: 3000,
    },
})

3000ミリ秒=3秒に一回スライドが自動で切り替わると思います。

slidesPerViewオプション

slidesPerViewオプションで表示枚数を変更する事ができます。
値には表示したい枚数を指定します。

new Swiper('.sample-slider', {
    slidesPerView: 3, 
})

スライドの表示枚数を3枚に変更できました。

slidesPerViewと合わせてよく使うオプションとしてspaceBetweenオプションがあります。
各スライドの間隔を調整する事ができます。

new Swiper('.sample-slider', {
    slidesPerView: 3, 
    spaceBetween: 20,  // 追記
})

上記のオプションをすべて使用して作成するスライダーとして自動無限ループスライダーがあります。
高頻出なオプションを沢山使用しているからか弊サイトでもよく見られています。

ページネーションオプション

Swiperはページネーションオプションも豊富で簡単にページネーションをカスタマイズできます。
例として、ページネーションを分数表記にしてみましょう。

new Swiper('.sample-slider', {
    pagination: {                       
        el: '.swiper-pagination',
        type: 'fraction',           //追加
    },
})

ページネーションが分数表記になったことが確認できると思います。

ページネーションのオプションは他にもあり、どれも簡単にカスタマイズする事ができます。
こちらにまとめているので興味ある方はご参照ください。

レスポンシブ対応

Swiperにはbreakpointsオプションが用意されており、レスポンシブ対応が簡単にできるようになっています。
下記のように記述して、特定のPCとSPで表示枚数を切り替えたりすることができます。

new Swiper('.sample-slider', {
    breakpoints: {
        600: {
            // ウィンドウ幅が600以上の時の表示枚数
            slidesPerView: 2
        },
    },
})

また、Swiperに用意されているメソッドを使用してSPの時のみスライダーにするというようなこともできたりします。
下記で詳しく解説しているので興味のある方はご参照ください。

【Swiper】PCとSPで表示枚数を切り替える【レスポンシブ】
【Swiper】スマホ(SP)のみスライダーにする方法

アニメーション効果

Swiperにはeffectオプションが用意されており、簡単にアニメーション効果を付けることができます。
例として、よく見るふわっと切り替わるフェードアニメーションを試してみましょう。

new Swiper('.sample-slider', {
    effect: 'fade',
    speed: 4000,
})

ふわっと切り替わるようになったと思うので試してみてください。

effectオプションは他にもあり、様々なアニメーション効果を付けることができます。

他のeffectオプションについてもこちらでまとめて解説しています。

アクセシビリティの向上

Swiper.jsではオプションを使用してスライダーのアクセシビリティ（操作性）を向上させることができます。
例えば、下記のように簡単にキーボードでスライダーを操作可能にできたりします。

new Swiper('.sample-slider', {
    keyboard: true,     // キーボードで操作できるようにする
})

キーボードの右矢印と左矢印で操作できると思うので試してみてください。

また、a11yというオプションがあり、スクリーンリーダー向けに読み上げ音声を設定する事で視覚が不自由な方にも操作しやすいスライダーも簡単に作ることもできます。

人気のスライダー

Swiperでは他にも以下のようなよく見る人気のスライダーを作ることができます。
これらの作り方の記事は弊サイトでもよく見られています。

SwiperをReactやVueで使う

SwiperはJavascriptのモダンフレームワーク/ライブラリである、ReactやVueにも対応しています。
読み込み方や使い方が少し違ってくるので、ReactやVueで使う時は注意が必要です。

SwiperをReactで使う方法は下記で解説しています。
Swiper.jsをReactで使う方法

Vueに関しては弊サイトに記事がないので公式の解説へのリンクを載せておきます。
Swiper Vue.js Components

以上、Swiper.jsの使い方とカスタマイズ方法でした！