Webサイトのコーディングをするなら必修とも言えるスライダー。
スライダー実装用のJSプラグインはいろいろありますが、本記事ではその中でもSwiperを使用した実用的なカスタマイズ例をご紹介します。

デモページを見る

まずはこちらのデモページをご覧ください。
片方だけはみ出しているスライダー、サムネイルと連動するスライダー、SPだけスライダーにする方法などなど、実際によく必要になる機能を網羅できるようなデモを厳選してご用意しました。
初心者さん向けのかなり初歩的な内容から、いろいろカスタマイズを加えた応用編まで解説していきます。

メインビジュアルの作例5つ（#11 ～ #15）については、Swiperのカスタマイズ方法だけでなく、アニメーションやデザインの参考になればと思い様々なパターンで作成してみました。
アレンジがしやすいよう、いずれもコードが複雑になりすぎない範囲（のつもり）でカスタマイズしていますので、ぜひご覧ください。

本記事では Swiper v8.1.4（記事執筆時の最新）を使用しています。
Swiper 5系からはIEはサポート対象外となっています。IE対応が必要な場合は 4系 をご利用頂き、バージョンに合わせてオプションなどの書き換えを行う必要があります。

Swiperってどんなプラグイン？

はじめに、Swiperの特徴を簡単にご紹介します。

Swiperのメリット

SwiperはjQuery非依存なので、脱jQueryを求める方や、要件としてjQueryが使えないプロジェクトの場合はまず候補に挙がると思います。
また、オプション・コールバック関数が非常に多く用意されているのが特徴で、柔軟なカスタマイズが可能となっています。

そして個人的に気に入っているポイントが、「ドラッグ（スワイプ）したときの操作感が良い」というところ。
比較対象としてslickを挙げますが、slickで実装したスライダーにはドラッグでの移動量に制限があり、たくさんドラッグしても少ししか移動できない仕様です。
一方Swiperで実装したものは、ドラッグ量と移動量が自然に連動するストレスフリーな操作感になっています。スライド数が多い場合や、なるべくたくさん見てほしい！というときはSwiperのほうがお勧めです。

Swiperのデメリット

多彩な機能があるため全てを把握することが難しく、「このオプション使えばもっと簡単にできた…！」とあとで気付くということもしばしば。
そして、機能が多いだけあってファイル容量も大きいです。
（jQueryを読み込まないならその分軽い、と考えることもできますが）
※Webpackでバンドルする場合は必要なモジュールだけをインポートすることができるので、容量を削減できそうです。

Swiperの導入方法

続いて基本的な導入の流れをご説明します。
公式サイトで分かりやすく説明されているので、その流れに沿って簡単にまとめました。

01 Swiperのインストール

以下の3つの方法でインストールが可能です。

詳しくは公式サイト Get Started をご確認ください。

とりあえず手軽に試してみたい、という方はCDNかファイルをダウンロードで進めてみてください。
本記事のデモではファイルをダウンロードして利用しています。

ファイルをダウンロードする場合

Download assets に記載されているリンク先（現在は v8）からCSSとJSをダウンロードします。

• ・swiper-bundle.min.js
• ・swiper-bundle.min.css
• ・swiper.min.css

CSSが2種類あるのですが、読み込むのはどちらか一方だけでOKです。
swiper-bundle.min.css のほうだと何もCSSを書かなくてもある程度スライダーの形が出来上がるので、初心者さんはこちらのほうがやりやすいと思います。ただ、その分ファイル容量は大きくなります。
swiper.min.css のほうは装飾なしで必要最低限のスタイルのみになっているので、オリジナルデザインで実装するならこちらのほうが無駄が少ないです。

※本記事デモでは swiper.min.css を使用しています。

ダウンロードしたファイルをHTMLで読み込む

02 HTMLにスライド要素を追加

こちらが基本の作りです。
.swiper .swiper-wrapper .swiper-slide の3つは必須です。
.swiper-wrapper と .swiper-slide の間に他の要素を割り込ませたりするとうまく動かなくなるのでご注意ください。

その他の要素は必要なときだけ追加しましょう。
.swiper の中には他の独自コンテンツを追加しても大丈夫です。

それぞれの役割については次の 基本のHTML構造・クラス名 で説明しています。

03 JSでスライダーの初期化を行う

JSにて上記のようにスライダーの初期化を行います。
ここまで行うとスライダーが動き出します！

下で よく使うオプションを盛り込んだ初期化コードサンプル もご紹介していますのでご活用ください。

04 CSSでデザイン調整を行う

最後にCSSでデザインの調整をしたら実装完了となります。
本記事デモと同じ swiper.min.css を利用している場合、初期化しただけの状態だとページネーションなどが表示されません。
「上手く動いていないのかな？」と思う方もいるかもしれませんが、落ち着いてソースを確認し、生成されている要素に対してスタイルを当てていきましょう。

基本のHTML構造・クラス名

デザインやアニメーションをカスタマイズするときのために、基本構造をざっくり把握しておきましょう。
各クラス名はパラメータで指定すれば任意のクラス名に変えることもできますが、本記事では全てデフォルトのままという前提で説明しています。

.swiper > .swiper-wrapper > .swiper-slide の構造は守る必要があります。
.swiper-wrapper と .swiper-slide の間に他の要素を割り込ませたりするとうまく動かなくなるのでご注意ください。
それ以外の制限はあまりなく、ページネーション、前へ / 次へボタン、スクロールバーは .swiper の外に出しても問題なく動作します。

こちらは現在のスライドの状況に応じて動的に追加されるクラス名です。
デザインやアニメーションのカスタマイズにはこのクラスを利用していきます。

ループモード時は「-duplicate」が間に入った別のクラスになる場合があるのでご注意ください。
詳しくは ループモード時の注意 で説明しています。

Swiperのオプション一覧

本記事で使用しているものを中心に、よく使うオプションをまとめました。
先にこれだけ読んでもよく分からないと思いますので、まずはデモを見てから、使用されているオプションを確認しに来て頂ければと思います。

パラメータ

公式サイトの一覧はこちら：Parameters

プロパティ・メソッド

公式サイトの一覧はこちら：Methods & Properties

プロパティ

メソッド

イベント

公式サイトの一覧はこちら：Events

スライド切り替え

似たような項目が多くてタイミングが分かりにくいので、自動再生をオンにしているときの発火する順でまとめてみました。スライド切り替えのたびに繰り返しこの順番で発火します。
このタイミングの差を利用すれば、思い通りのアニメーションを実装しやすいと思います。
※ユーザー操作によりスライドを切り替えたときや、フェードモードとスライドモードでは挙動に細かな違いが出ます。

初期化

操作

よく使うオプションを盛り込んだ初期化コードサンプル

前章のまとめとして、使用頻度が高いと思われるパラメータを一通り盛り込んだコードをご用意してみました！
実装の際にご活用頂ければと思います。

#01 基本 基本のスライダー

それではここから本題のデモの解説に入っていきます。
まずは最もよく見るタイプのごく普通のスライダーから。

前へ / 次へボタンだけがコンテンツ幅の外に出ているデザインって頻出ですよね。
よく見るタイプでありながら少し調整しにくいところもあるので、初心者さん向けにポイントとして挙げました。

はみ出させたい要素があれば .swiperの外に出す

前へ / 次へボタンをコンテンツ幅からはみ出させようとすると、.swiper に overflow: hidden; がかかっているため上手くいきません。
そういうときは .swiper の外に出してしまうのが一番簡単です。
position 調整のための親要素（ここでは .swiper-area ）で囲っておき、.swiper-button-prev と .swiper-button-next を .swiper の外に出してしまえばシンプルに解決できます。

前へ / 次へボタンをスライドに対して上下中央揃えにする

前へ / 次へボタンはスライドの高さに対して上下中央揃えのデザインになっていることが多いと思います。
ですが、ページネーションがあるとその分の高さも含まれてしまいボタンの位置がずれてしまいます。
この場合でも .swiper の外に出してしまうのが早いです。
前へ / 次へボタンがいる階層よりも外に .swiper-pagination を出してしまえばOK。

ホバー効果でスライドを動かしたり、影を付けたりする場合の調整

スライドに影を付けていたり、ホバー効果でスライドの位置を動かしたりしている場合、そのままだと .swiper に overflow: hidden; がかかっているので切れてしまいます。
なので、はみ出させたい分だけ .swiper に padding を付けておくようにします。
本記事のデモでは、ホバー時にスライドを上に 16px 動かす効果を付けているので、.swiper に padding-top: 16px を付けています。

#02 基本 右側だけはみ出た形のスライダー

こちらもよく見るタイプのスライダー。
「スライダーの左端がコンテンツ幅に揃っていて、かつ右側だけはみ出ている」というデザインです。
また、デモ01では slidesPerView でスライドの横幅を制御していましたが、こちらではCSSのほうで固定値を指定するパターンをご紹介しています。

初期状態で右側だけコンテンツ幅からはみ出る

左だけ余白が付いていればいいから横幅は100%にして margin-left を付けて…のような調整をし始めると、あまり上手くいきません。
「基準位置はコンテンツ幅にしつつ、そこからはみ出させたい」ときは、.swiper にかかっている overflow: hidden; を visible で上書きしましょう。そして代わりに親要素のほうに overflow: hidden; をかけておくようにします。

スライドの横幅を固定値（px）にする

slidesPerView でスライド数を指定すると、コンテナのサイズに応じてスライドのサイズも動的に変わる形になります。
そうではなく「どの画面幅でも常に○pxにしたい」という場合は、slidesPerView: ‘auto’ を指定することで、CSSでのサイズ調整が可能になります。

前へ / 次へボタンとページネーションを横並びにする

前へ / 次へボタンやページネーションのHTML構造は自由に変えられるので、横並びにしたければこの2つを囲う div（ここでは .swiper-controller ）を追加しましょう。
あとはCSSで flex をかけるなど適宜調整するだけ。

#03 基本 コンテンツ幅からはみ出たスライドを薄くする

デモ01をベースに、追加で3点のカスタマイズを行ったパターンです。
いずれも基本のオプションのみで簡単に実装できます。

自動再生させる

speed：スライドアニメーション（切り替わるときの動き）のスピードをミリ秒で指定します。
autoplay.delay：自動的に次のスライドに切り替わるまでの時間（間隔）をミリ秒で指定します。
autoplay.disableOnInteraction：false にすればユーザーがドラッグなどの操作をしても自動再生が止まらないようになります。

無限ループさせる

loop：true にするとスライダーが無限ループするようになります。
loopAdditionalSlides：ループモード時に複製するスライド数を指定します。未指定だと滑らかに繋がらないことがあるため、基本的に1以上で設定しておくのがお勧め。

ループモード時に気を付けること

ループモードにすると、最初と最後のスライドがつながるようにスライドが複製されます。
.swiper-slide の数が元々のHTMLよりも増える形になるので、JSでindexを取得して何か処理をしようとするとうまくいきません。
アクティブなスライドのインデックス番号を取りたいときは、swiper.realIndex を利用しましょう。

また、基本のHTML構造・クラス名 で説明している通り、状況によって .swiper-slide-active .swiper-slide-prev .swiper-slide-next の間に「-duplicate」が入った別のクラス名が付くことがあります。
その場合はCSSを以下のように書いているとスタイルが当たりません。

このままで問題ないケースも多いのですが、後半で紹介しているメインビジュアルの作例ではアニメーションのつながりが一部おかしくなってしまいます。
そういうときは以下のように書き方を変更してみましょう。

コンテンツ幅からはみ出たスライドを薄くする

表示状態のスライド（ .swiper のエリア内にいるもの）を判定するために、watchSlidesProgress を利用します。こちらを true にすると、表示状態のスライドに .swiper-slide-visible のクラスが付くようになります。
あとはCSSで .swiper-slide-visible 以外のスライドを薄くしておきます。

#04 応用 ブレークポイント切り替えでSPだけスライダーにする

SPだけスライダーにするのでPCのときは swiper.destroy() をすればよい！ということはすぐ分かると思うのですが、きちんと「PC↔SPの切り替え時にスライダーの解除↔再初期化をする」ためには「スライダーが初期化済みかどうか」の判定を入れることがポイントです。

ブレークポイント通過時に実行する

ブレークポイントの判定には window.matchMedia と addListener() を用い、mediaQuery に変化があったとき（ブレークポイントを通過したとき）だけ実行させるようにしています。

ただし、このコードだとブレークポイントが複数あるケースに対応できません。その場合は 次のデモ #05 のほうの書き方をしてみてください。

スライダーの解除↔再初期化を行う

続いて、メディアクエリにマッチしたらスライダーを初期化し、マッチしなかったらスライダーを解除する、という処理を追加します。
スライダーを解除する処理は、if (mySwiper) でスライダーが初期化済みのときだけ実行されるようにします。そのため mySwiper の初期値は null にしておきましょう。

スライダーが初期化されていないときのスタイル調整を行う

PCのときはスライダーが生成されていない状態なので、横並びにするなどのレイアウト調整はCSSで行う必要があります。
また、SPからPCに切り替えると、前へ / 次へボタンやページネーションなどの一度生成された要素はそのまま残るので、display: none; にしておきましょう。

#05 応用 総スライド数が slidesPerView を超える時だけスライダーにする

先ほどのデモは、ブレークポイント（1点）によってスライダーの解除↔初期化を切り替えるシンプルな仕様でした。
一方こちらは、ブレークポイント（複数）ごとに総スライド数と slidesPerView を比較して、総スライド数の方が多いときだけスライダーにする、という形で作成してみました。
こちらの方がより実際のニーズに応えられる仕様ではないでしょうか。

予めブレークポイントと slidesPerView のセットを配列に格納しておき、総スライド数と比較してスライダーの解除↔初期化を切り替えるという形をとっています。
ブレークポイントがさらに多い場合も、Swiperのパラメータ（breakpoints）と配列にそれぞれ追加すれば対応できます。

ブレークポイントと slidesPerView のセットを配列に格納

まずブレークポイントと slidesPerView のセットを配列に格納しておきます。
breakpoints.reverse() をしているのは、Swiperのパラメータ（breakpoints）の指定順と、配列の順番を揃えたかったためです。

スライダーの解除↔再初期化を行う

ロード時とリサイズ時に、配列のブレークポイントがメディアクエリにマッチするか判定していき、マッチしたブレークポイントの slidesPerView と総スライド数を比較して解除↔再初期化を切り替えます。

スライダーが初期化されていないときのスタイル調整を行う

先ほどのデモと同様に、スライダーが生成されていないときのレイアウト調整をCSSで行います。

#06 応用 ゆっくり動き続ける無限ループスライダー

通常の自動再生は「スライダーが止まる→動く」の繰り返しですが、止まらずに常にゆっくり動き続けるという形にしたいときもありますよね。
基本的には autoplay.delay を 0 にすれば実現できるのですが、そのままだとユーザーがドラッグしたときの挙動がおかしな感じになってしまうので、そこをカスタマイズする必要があります。
※ユーザーがドラッグできない形でよければ、allowTouchMove: false にしておくだけでOKです。

ゆっくり動き続けるようにする

autoplay.delay を 0 にすることで常に動き続ける形にすることができます。

ユーザーがドラッグしたときのスピード調整

ユーザーのドラッグ操作が終わったとき（ touchEnd ）に、 slideTo(swiper.activeIndex + 1) で次のスライドへ移動させるようにしました。

また、スライド位置のスナップや慣性スクロールが邪魔になるため、以下の設定も重要です。
freeMode：true にするとスライド位置がスナップしなくなります。
freeMode.momentum：false にすると慣性スクロールがオフになります。

こちらの記事を参考にさせていただきました。
スワイプできる無限ループスライダーを実装する【Swiper】

ホバーしたら他のスライドを薄くする

ホバー中の要素だけを目立たせることで、注目を引くことができる表現ですね。
このように手軽に実装することができます。

#07 基本 サムネイル（スライダー）を付けて連動させる

メインのスライダーとサムネイルのスライダーがあり、2つを連動させるタイプです。
非常に簡単に実装でき、そのままでサムネイルのスライダーの動きも自然なので、複雑なカスタマイズは必要ありません。

また、このデモで初めてフェードモードを使用しているので、フェードモードのときに共通で調整しておきたい項目も合わせてご説明します。

2つのスライダーを連動させる

thumbs で連動させたいスライダーのインスタンス名（ここでは mySwiper_thumb ）を指定すると、2つのスライダーが連動するようになります。
mySwiper_main のほうで mySwiper_thumb を指定するので、初期化の記述順が逆だとエラーになってしまいますのでご注意ください。

フェードモード時の共通調整

切り替えのアニメーションをスライドではなくフェードにするときは、このように指定します。

#08 応用 サムネイル（非スライダー）を付けて連動

こちらはサムネイルをスライダーにしないで連動させるタイプです。
thumbs は使わずに、スライド切り替え時にアクティブ用のクラスを付け替える処理を追加します。

サムネイルはスライダーにしないので、普通にCSSでレイアウト調整をしておきます。
そしてメイン画像のスライダーのほうで、スライドが切り替わったとき（ slideChange ）に、アクティブなスライド番号を取得し、対応するサムネイルにクラス .thumb-media-active を付与する、という処理を追加します。
また、予めHTML側でアクティブ状態のサムネイルにクラス .thumb-media-active を付けておき、スライダーの初期化時（ afterInit ）にその順番を取得して表示を合わせるようにしました。

#09 応用 スライダーの向きを交互に変える

#06 ゆっくり動き続ける無限ループスライダー からの派生で、進行方向を交互に変えたパターンです。
同じオプションはまとめておき、別々に設定する箇所を後から追加する形にしました。

スライダーの進行方向を逆にする

autoplay.reverseDirection：true にすると自動再生の進行方向が逆向きになります。

#06 ユーザーがドラッグしたときのスピード調整 と同様ですが、方向が逆向きの場合は slideTo(swiper.activeIndex – 1); となるようにしているところがポイント。

同じオプションをまとめる

まず params で共通のオプションをまとめておき、異なる部分はスプレッド構文（ … ）を利用して後から追加しています。

#10 応用 スライダーを入れ子にする

手順説明などで見かける、スライダーが入れ子になっているパターンです。
また、「STEP.01」のようにページネーションの出力内容をカスタマイズしてみました。

スライダーを入れ子にする

このように、親スライダーと子スライダーをそのまま入れ子構造にするだけで実装できます。分かりやすいですね。
親スライダーのほうに指定している nested: true が重要で、親と子のスライダーの方向が同じ場合の誤作動を防ぐための設定です。もしこの設定をしていないと、子スライダーをドラッグしたいのに親スライダーが動いてしまう！といった問題が起こりますのでご注意ください。

ページネーションの出力内容をカスタマイズする

renderBullet でページネーションの内容をカスタマイズすることができます。
index でスライド番号、className でクラス名を取得できるので、それを利用しつつ「STEP.01」の形になるように調整してみました。

#11 基本 メインビジュアル フェードアニメーション

写真がゆっくりズームインし、テキストが少し遅れてフェードインする、というシンプルなアニメーションを付けてみました。このくらいであれば特別なカスタマイズは不要で、フェードモードで実装したものに対しCSSでアニメーションを付けるだけで作成できます。

autoplay.waitForTransition：false にすると、スライド切り替え中にも自動再生が止まらないようになります。true だと最初のスライドの表示時間だけ短くなってしまうので、本デモのようにアニメーション演出を入れるなら false にしておいたほうが自然だと思います。

followFinger：false にすると、スライド切り替えのアニメーションはドラッグ操作が終了してから開始されるようになります。テキストや背景にアニメーションを付けているので、ドラッグ中に下のスライドがだんだん透けて出てきてしまうと困るため、false にしています。

フェードモード時の共通の注意事項は フェードモード時の共通調整 でも説明していますので、合わせてご確認ください。

[class*=-active] のように指定することで、クラスに -active が含まれる場合にアニメーションを適用させています。

#12 応用 始めと終わりで別々のアニメーションを付ける

アクティブになったときはコンテンツが下から上にフェードインして、次のスライドに切り替わる際にはさらに上に移動しながらフェードアウトする、という感じで違うアニメーションを組み合わせてみました。

.anm-started が始めのアニメーション用（下から上にフェードイン）
.anm-finished が終わりのアニメーション用（上に移動しながらフェードアウト）
のクラス名です。

1：slideChangeTransitionStart のときにアクティブなスライドに .anm-started を追加
2：myDelay – 1000 の時間がたったら .anm-started を .anm-finished に付け替える

3：slideChange のときに .anm-started を .anm-finished に付け替える
※ユーザーが手動でスライドを切り替えたときのための処理です

このようにクラスを付け替えて、ちょうどよいタイミングでアニメーションがかかるようにしています。

#13 応用 縦方向のスライダー

こちらはスライダーの方向を縦にしてみたパターンです。
横方向スライダーとの違いは .swiper への高さ指定が必須になることくらいで、他には方向が変わることによる特別な調整は必要ありません。

direction：スライダーの方向を指定します。’vertical’ で縦方向になります。
slideToClickedSlide：true にすると、クリックしたスライドまで移動する（アクティブにする）ようになります。

サムネイルスライダーの連動についてですが、#07 のほうでは片方だけを連動させればよかったのに対し、このデモでは双方向に連動させる必要があります。そのため、thumbs で指定するインスタンス名がエラーになってしまわないように、最初に let mySwiper_main; で宣言しておくようにしました。

縦方向の場合は .swiper への高さ指定が必須となります。

#14 応用 スライドごとに表示時間を変えて、進捗状況と連動したプログレスバーを作成する

スライドによってテキスト量が全然違うケースなどでは、スライドごとに表示時間を変える必要が出てくると思います。そうなると、プログレスバーなどのアニメーションもスライド表示時間とぴったり合うようにしたいですよね。
本デモではその2点のカスタマイズをご紹介します。

プログレスバーはもともとページネーションで用意されているのですが、最後のスライドから最初のスライドに戻ったときの動きなどがちょっと理想と違う部分があり、別で作成しました。

スライドごとに表示時間（delay）を変える

autoplay.delay の値はHTML側でも指定できるようになっています。
上記サンプルのように、.swiper-slide に data-swiper-autoplay の属性でミリ秒で指定します。

進捗状況と連動したアニメーション（プログレスバー）

下のプログレスバー（ progressbar ）はスライダー全体の進捗率、円形ライン（ .slide-fraction ）は各スライドの進捗率と連動しています。
アニメーションはすべてCSSで作成し、transitionDuration と animationDuration をそれぞれの要素にセットすることで時間を合わせる形となっています。

#15 応用 お手軽パララックス+スライド外のコンテンツと連動させる

メインビジュアルのように画面いっぱいに広がるデザインでは、スライドモードを用いると少しうるさく感じてしまうので、フェードモードを採用しがちです。
でもちょっとしたひと工夫でスライドモードならではの表現を楽しむこともできます！ということで、このデモでは横にずれる効果を利用した視差効果（パララックス）を付けてみました。
こちら非常に簡単に対応できるので、ちょっとしたクオリティアップにお勧めです。

また、スライドするのは背景だけにして、その上に位置固定でコンテンツを配置するようにしてみました。これもスライド全体がのっぺりと動くより、少しリッチな印象にできるのではないかなと思います。

視差効果（パララックス）を付ける

仕組みは簡単で、前のスライドと次のスライドの画像の位置を、アクティブなスライド側（中央）にずらしておくだけです。そうすると、スライドの移動距離よりも画像の移動距離が少なくなり、奥行きを感じられるようになります。

また、clip-path を使ってガラスのフレーム風の装飾も入れてみました。

スライド外に独自要素を置いて連動させる

同じページに同じスライダーを複数設置する方法

デモ内では紹介できなかったので、最後に複数の同じスライダーを設置する場合の書き方についても簡単にご説明しておきたいと思います。

このように普通に初期化の記述を書けば、同じクラス名の要素はすべてスライダーとして動作するようになります。
しかし、この書き方だと「前へ / 次へ」ボタンやページネーションが正しく連動しません。

このように、各スライダーごとに個別に要素を取得するように変更すれば、正常に動作するようになります！

まとめ

いかがでしたでしょうか。
本記事で触れていないオプションがまだまだあるのですが、ご紹介したものだけでもよく出てくるパターンは大体作れてしまうのではないかなと思います。
他にもどんなものが作れるのか、ぜひ公式サイトを覗いてみてください。

jQuery非依存でもっと軽量のプラグインは他にも出てきていますが、利用者数が多くノウハウが溜まっていることと、ずっと活発に開発され続けているという信頼感は大きいですよね。
バージョン5系から早々にSwiperのサポート対象外になってしまっていたIEも、今年の6月にサポート終了ということで、今後は最新バージョンを心おきなく使えるようになるのではないでしょうか。
今後のアップデートにも期待していきたいと思います。