BLOG

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

2022/04/27

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

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

デモページを見る

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

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

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

目次

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

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

メリット

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

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

そして個人的に気に入っているポイントが、「ドラッグ(スワイプ)したときの操作感が良い」というところ。
比較対象としてslickを挙げますが、slickで実装したスライダーにはドラッグでの移動量に制限があり、たくさんドラッグしても少ししか移動できない仕様です。
一方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 の中には他の独自コンテンツを追加しても大丈夫です。

それぞれの役割については次の 基本の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 の外に出しても動作します。

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-visiblewatchSlidesProgress: true のときのみ
表示状態のスライドに付くクラス名。
.swiper-slide-duplicate ループモード時に複製されたスライドに付くクラス名。

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

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

Swiperのオプション一覧

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

パラメータ

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

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

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

< 例 >

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

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

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

renderBullet: (index, className) => {
  let num = ('00' + (index + 1)).slice(-2);
  return '' + num + '';
},
renderCustomfunction(swiper, current, total)type: ‘custom’ のときのみ
出力内容を指定。
}
roundLengthsbooleanfalse true:スライドの横幅・高さの小数点以下を四捨五入して、中の画像や文字がぼやけないようにする。
slideToClickedSlidebooleanfalse true:クリックしたスライドに移動させる(アクティブにする)。
slidesPerViewnumber | ‘auto’1 表示させるスライドの枚数を指定。
指定した枚数分がコンテナ内に収まるように調整される。
小数点以下の値も指定可能( 1.5 など)。
CSSでサイズ調整したい場合は ‘auto’ を指定。
spaceBetweennumber0 スライド間の余白を指定(px)。
CSSで margin を付けるとスライドの位置がずれていくことがあるため、こちらで指定するのが推奨。
speednumber300 スライド切り替えのアニメーションのスピードを指定(ミリ秒)。
thumbsThumbsOptions
{
swiperSwipernull サムネイルのスライダーと連動させる場合、サムネイルのスライダーのSwiperインスタンス名を指定。
}
watchSlidesProgressbooleanfalse 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

スライド切り替え

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

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

初期化

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

操作

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

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

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

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

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

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

デモのポイント

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

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

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

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

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

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

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

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

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

デモのポイント

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

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

左だけ余白が付いていればいいから横幅は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点のカスタマイズを行ったパターンです。
いずれも基本のオプションのみで簡単に実装できます。

デモのポイント

  1. 自動再生させる
  2. 無限ループさせる
  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-slide-active { … }
.swiper-slide-prev { … }
.swiper-slide-next { … }

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

.swiper-slide[class*=-active] { … }
.swiper-slide[class*=-prev] { … }
.swiper-slide[class*=-next] { … }

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

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

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

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

デモのポイント

  1. ブレークポイント通過時に実行する
  2. スライダーの解除↔再初期化を行う
  3. スライダーが初期化されていないときのスタイル調整を行う

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

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

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

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

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

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

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

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

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

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

デモのポイント

  1. ブレークポイントと slidesPerView のセットを配列に格納
  2. スライダーの解除↔再初期化を行う
  3. スライダーが初期化されていないときのスタイル調整を行う

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

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

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

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

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

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

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

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

デモのポイント

  1. ゆっくり動き続けるようにする
  2. ユーザーがドラッグしたときのスピード調整
  3. ホバーしたら他のスライドを薄くする

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

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

注意点

初期化のタイミングを画像読み込み後にしておかないと、自動再生が止まった状態で表示されてしまうことがありました。

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

ユーザーのドラッグ操作が終わったとき( touchEnd )に、以下の処理を行うようにしています。
1:swiper.getTranslate() で現在の位置を取得(currentTranslate)
2:アクティブなスライドの横幅を取得(slideWidth)
3:swiper.setTranslate(currentTranslate – slideWidth) で位置をセット
4:swiper.setTransition(mySpeed) でスピードをセット

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

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

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

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

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

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

デモのポイント

  1. 2つのスライダーを連動させる
  2. フェードモード時の共通調整

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

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

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

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

注意点

フェードモードにするとすべてのスライドが重なる形になります。もしスライド内に透明の余白があった場合、下のスライドが見えてしまいます。
対策として fadeEffect.crossFade: true もセットで指定しておきましょう。

注意点

フェードモード時はドラッグ操作ではふわっと切り替わるのですが、前へ / 次へボタンを押すと transition が効かずにパッと切り替わってしまいます
対策として、以下のようにCSSで上書きしておくのがお勧めです。

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

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

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

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

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

デモのポイント

  1. スライダーの進行方向を逆にする
  2. 同じオプションをまとめる

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

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

#06 ユーザーがドラッグしたときのスピード調整 を少し変更し、方向が逆向きだったら swiper.setTranslate(currentTranslate + slideWidth); となるようにしました。

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

まず params で共通のオプションをまとめておき、異なる部分はif文で分岐して追加しています。

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

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

デモのポイント

  1. スライダーを入れ子にする
  2. ページネーションの出力内容をカスタマイズする

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

このように、親スライダーと子スライダーをそのまま入れ子構造にするだけで実装できます。分かりやすいですね。
親スライダーのほうに指定している 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点のカスタマイズをご紹介します。

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

デモのポイント

  1. スライドごとに表示時間(delay)を変える
  2. 進捗状況と連動したアニメーション(プログレスバー)

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

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

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

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

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

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

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

デモのポイント

  1. 視差効果(パララックス)を付ける
  2. スライド外に独自要素を置いて連動させる

視差効果(パララックス)を付ける

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

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

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

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

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

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

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

まとめ

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

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

FOLLOW US