Web制作無料提案致
BLOG
25年新卒 WEBエンジニア インターンシップ 受付中

【v8】Swiperの使い方・実用的なデモ15個の解説 ー基礎から応用までー

更新日：2023/06/29

Swiperの使い方・実用的なデモ15個の解説 ー基礎から応用までー

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

デモページを見る

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

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

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

目次

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

公式サイト
公式デモ

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

Swiperのメリット

  • ・jQuery非依存
  • ・オプション・コールバック関数が豊富でカスタマイズ性が高い
  • ・ドラッグ（スワイプ）したときの操作感が良い
  • ・活発に開発されている
  • ・利用者数が多く、日本語の参考記事も多い

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

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

Swiperのデメリット

  • ・たくさんの機能を把握するのが大変
  • ・容量が大きい
  • ・公式ドキュメントが英語

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

Swiperの導入方法

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

01 Swiperのインストール

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

  • NPMでインストール
  • CDNを利用
  • ファイルをダウンロードして利用

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

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

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

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

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 basic HTML

.swiper スライダー全体を囲むコンテナ（※バージョン6以前では .swiper-container ）。
このエリア内にスライド要素が収まる形。
はみ出させたい場合は overflow: visible; で上書きします。
.swiper-wrapper .swiper-slide（各スライド）を囲む要素。
これを transform で移動させることでスライダーの動きを実現しています。
.swiper-wrapper の直下には .swiper-slide だけを入れます。
.swiper-slide この中に各スライドの要素を入れます。
デザインを調整する際、.swiper-slide に直接スタイルを当てると不具合に繋がる場合があるので要注意。
以下のように中身を囲う要素を作って、それに対してスタイルを当てるのがお勧めです。

<div class="swiper-slide">
  <div class="item">
    <img src="img.jpg" alt="">
    <p class="text">テキストが入ります</p>
  </div>
</div>
.swiper-pagination ページネーション
.swiper-button-prev |
.swiper-button-next		 前へ / 次へボタン
.swiper-button-disabled 前のスライド / 次のスライドがないときに付くクラス名
.swiper-scrollbar スクロールバー

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

Swiper basic HTML

.swiper-slide-active アクティブなスライドに付くクラス名。
ループモード時は状況によって .swiper-slide-duplicate-active が付く。
.swiper-slide-prev アクティブなスライドの前のスライドに付くクラス名。
ループモード時は状況によって .swiper-slide-duplicate-prev が付く。
.swiper-slide-next アクティブなスライドの次のスライドに付くクラス名。
ループモード時は状況によって .swiper-slide-duplicate-next が付く。
.swiper-slide-visible ※ watchSlidesProgress: true のときのみ
表示状態のスライドに付くクラス名。
.swiper-slide-duplicate ループモード時に複製されたスライドに付くクラス名。

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

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

Swiperのオプション一覧

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

パラメータ

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

パラメータ タイプ デフォルト値 説明
allowTouchMove boolean true false：ドラッグ（スワイプ）でのスライド切り替えを無効にする。
autoplay boolean | AutoplayOptions
{
delay boolean 3000 次のスライドに切り替わるまでの時間を指定（ミリ秒）。
data-swiper-autoplay 属性を利用して、HTML側で個別に値を指定することも可能。
disableOnInteraction boolean true true：ユーザーが操作したときに自動再生を止める。
false にしておくのがお勧め。
reverseDirection boolean false 自動再生の進行方向を逆にする。
waitForTransition boolean true true：スライド切り替えのアニメーションの間は自動再生を止める。
true だと1枚目のスライドだけ表示時間が短くなるため、表示時間を揃えたいなら false にするのがお勧め。
}
breakpoints object

ブレークポイントごとにパラメータを変更する。

＜ 例 ＞

breakpoints: {
  // when window width is >= 320px
  320: {
    slidesPerView: 2,
    spaceBetween: 20
  },
  // when window width is >= 640px
  640: {
    slidesPerView: 4,
    spaceBetween: 40
  }
}
centeredSlides boolean false true：アクティブなスライドが中央に来るようにする。
direction ‘horizontal’ | ‘vertical’ ‘horizontal’ ‘vertical’：スライド方向を垂直方向にする。
effect ‘slide’ | ‘fade’ | ‘cube’ | ‘coverflow’ | ‘flip’ | ‘creative’ | ‘cards’ ‘slide’ エフェクトのタイプを指定。
詳しくは 公式のデモ をご覧ください。
fadeEffect FadeEffectOptions ※ effect: ‘fade’ のときのみ
{
crossFade boolean false true：スライドのクロスフェードを有効にする。
下のコンテンツが重なって出てしまわないように true がお勧め。
}
followFinger boolean true true：ドラッグ（スワイプ）と連動してスライダーが動き、前後のスライドが見えてくるようにする。
false：ドラッグ（スワイプ）中はスライダーを動かさない。アクティブなスライドにCSSアニメーションを適用するケースなどでは false のほうがお勧め。
freeMode boolean | FreeModeOptions false true：自由にドラッグ（スワイプ）できるようにする。スライド位置がスナップしなくなる。
下の詳細設定が必要なければ freeMode: true だけでOK。
{
enabled boolean true：自由にドラッグ（スワイプ）できるようにする。スライド位置がスナップしなくなる。
momentum boolean true false：ドラッグ（スワイプ）した後の慣性スクロールをオフにする。
}
grabCursor boolean false true：PCでホバー時にマウスカーソルを「掴む」マークにする。
loop boolean false true：無限ループさせる。
loopAdditionalSlides number 0 ※ loop: true のときのみ
複製するスライド数を指定。0 だとループが滑らかに繋がらないことがあるため 1 以上がお勧め。
mousewheel boolean | MousewheelOptions true：マウスホイールによるスライド切り替えを有効にする。
下の詳細設定が必要なければ mousewheel: true だけでOK。
{
forceToAxis boolean false true：スライド方向とスクロール方向が一致しているときだけ有効にする。水平方向のスライダーなら水平方向のスクロールのみ、垂直方向のスライダーなら垂直方向のスクロールのみ可能となる。
invert boolean false true：スクロール方向とスライドの動く向きを逆にする。
}
nested boolean false true：スライダーを入れ子にしているときにタッチイベントを正しく取得する。親子のスライド方向が同じ場合のみ使用。
pagination boolean | PaginationOptions
{
clickable boolean false true：クリックでのスライド切り替えを有効にする。押せそうなデザインなら true にしておくのがお勧め。
type ‘bullets’ | ‘fraction’ | ‘progressbar’ | ‘custom’ ‘bullets’ 表示タイプを指定。
‘bullets’：スライド枚数分のドットが作られる。
‘fraction’：分数で表示する（例：1 / 10）。
‘progressbar’：スライドの進捗に応じてバーが伸びていく。
‘custom’：出力内容をカスタマイズ。renderCustom で書式設定が必要。
renderBullet function(index, className)

※ type: ‘bullets’ のときのみ
出力内容を指定。

＜ 01、02…とスライド番号を入れたい場合の例 ＞

renderBullet: (index, className) => {
  let num = ('00' + (index + 1)).slice(-2);
  return '' + num + '';
},
renderCustom function(swiper, current, total) ※ type: ‘custom’ のときのみ
出力内容を指定。
}
roundLengths boolean false true：スライドの横幅・高さの小数点以下を四捨五入して、中の画像や文字がぼやけないようにする。
slideToClickedSlide boolean false true：クリックしたスライドに移動させる（アクティブにする）。
slidesPerView number | ‘auto’ 1 表示させるスライドの枚数を指定。
指定した枚数分がコンテナ内に収まるように調整される。
小数点以下の値も指定可能（ 1.5 など）。
CSSでサイズ調整したい場合は ‘auto’ を指定。
spaceBetween number 0 スライド間の余白を指定（px）。
CSSで margin を付けるとスライドの位置がずれていくことがあるため、こちらで指定するのが推奨。
speed number 300 スライド切り替えのアニメーションのスピードを指定（ミリ秒）。
thumbs ThumbsOptions
{
swiper Swiper null サムネイルのスライダーと連動させる場合、サムネイルのスライダーのSwiperインスタンス名を指定。
}
watchSlidesProgress boolean false true：各スライドの進捗状況を監視する。表示状態のスライドに .swiper-slide-visible のクラスが付くようになる。

プロパティ・メソッド

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

プロパティ

プロパティ 説明
swiper.activeIndex アクティブなスライドのインデックス番号を取得。
swiper.realIndex アクティブなスライドのインデックス番号を取得。
※ループモードの場合は .activeIndex ではなくこちらを使用
swiper.params 初期化時のパラメータの値を取得。
例：mySwiper.params.speed

メソッド

メソッド 説明
swiper.destroy(deleteInstance,
cleanStyles)		 スライダーを無効化する。
deleteInstance：インスタンスを削除するかどうか（boolean）｜デフォルトは true
cleanStyles：スライダー要素の不要なスタイルを削除するかどうか（boolean）｜デフォルトは true
swiper.getTranslate() スライダーの現在の translate の値を取得。
swiper.setTranslate(translate) スライダーの translate の値を書き換える。
swiper.slideTo(index,
speed, runCallbacks)		 指定したインデックス番号のスライドへ移動。
swiper.slideToLoop(index,
speed, runCallbacks)		 指定したインデックス番号のスライドへ移動。
※ループモードの場合は slideTo() ではなくこちらを使用

イベント

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

スライド切り替え

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

発火順 イベント名 タイミング
1 setTransition アニメーションを開始するたび
2 setTranslate .swiper-wrapper の位置（translate）が変わるたび
3 activeIndexChange |
realIndexChange		 スライドのインデックス番号が変わるとき
※ realIndexChange はループモード用
4 slideChange アクティブなスライドが変わるとき
5 beforeTransitionStart アニメーション開始前
6 transitionStart アニメーション開始時
7 slideChangeTransitionStart スライド切り替えのアニメーション開始時
8 setTransition （1と同じ）
9 transitionEnd アニメーション終了後
10 slideChangeTransitionEnd スライド切り替えのアニメーション終了後

初期化

発火順 イベント名 タイミング
1 beforeInit 初期化直前
自動再生を有効にしている場合はここで上記「スライド切り替え」の1～10が発火
2 init Swiperの初期化直後
3 afterInit 初期化直後

操作

イベント名 タイミング
beforeResize resize ハンドラの前
touchEnd クリック後または指が離れたとき

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

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

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

プレビュー
ソースを見る

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

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

デモのポイント

  1. はみ出させたい要素があれば .swiper の外に出す
  2. 前へ / 次へボタンをスライドに対して上下中央揃えにする
  3. ホバー効果でスライドを動かしたり、影を付けたりする場合の調整

はみ出させたい要素があれば .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のほうで固定値を指定するパターンをご紹介しています。

デモのポイント

  1. 初期状態で右側だけコンテンツ幅からはみ出る
  2. スライドの横幅を固定値（px）にする
  3. 前へ / 次へボタンとページネーションを横並びにする

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

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