Weblasts

swiper.js(8.1.4)の使い方を紹介してみる

ありがたいことに当サイトでは『slick』に関する記事が人気で、スライダー系の人気はまだまだ健在なのかと感じる今日このごろ

ちょっと前の案件で動きの参考に提示されたサイトと同じものを使ってくれとのことでswiper.jsを初めて使ったのですが、パラメータが多すぎてあんまりよくわからなかったので後学のために使い方をまとめてみます。

この記事ではそもそもの使い方と、よく使うであろうパラメータの使い方を紹介していきます

swiperを使うための準備

swiperを使う準備としてjs・cssファイルを読み込めるよう準備をする必要があります。

以下のリンクから公式サイトへ移動し必要なファイルをDLするか、CDNのコードをコピーしてきましょう。

サンプルとしてCDNを使った方法で紹介していきますのでCDNのコードをコピーすることができたらhead要素内に配置しておきます。

ちなみにswiperはjQueryに依存していないのでjQueryは必要ありません

実際にswiperを動かす部分のHTMLのコードはルールが決まっているようなので基本コピペするといいでしょう

class=”swiper”の部分は全体を囲むための要素で任意のクラス名をつけて大丈夫で、イニシャライズするときに使う要素になります

class=”swiper-wrapper”はスライドをまとめるための要素でクラス名は固定

class=”swiper-slide”はスライド部分用のクラスになります。
今回ページ内に大量にサンプルを投下していく都合上画像は使いませんが、画像を使う場合はdiv要素にクラス『swiper-slide』つけてその子要素としてimg要素を入れるか、img要素にクラス『swiper-slide』つけてクラス『swiper-wrapper』の子要素として入れても問題なく動きます。

コンテナサイズを指定したい場合はクラス『swiper』に対して幅を指定します。
今回のサンプルでは100%で使いたいので指定はしませんが任意の大きさにしたいときはこちらに指定してください。

あわせて「overflow: hidden;」も設定しておくとスライドがはみ出ることがなくなるので私はつけています

swiperの使い方

swiperをイニシャライズするためのコードは以下のようになります

これでswiperはスライダーとして機能してくれますがスワイプやドラッグでスライドを送る機能しかありません

とりあえず起動したswiper
1
2
3

swiperに機能をつけるにはオプションがパラメータやモジュールという形で用意されていて、このパラメータやモジュールを指定して行いますので、その書式をまずは紹介しておきます

パラメータやモジュールを指定する場合はイニシャライズする要素を指定したあとにカンマをうち{}を続けます
パラメータやモジュールは{}の中にオブジェクトの形で入れていきます

パラメータやモジュールによっては値を複数指定して細かい設定が可能なものもありますが、値の方の{}の中にパラメータorモジュール:値の形で記述します

よく使いそうなswiperのモジュール

ここで紹介しているもの以外にも用意されていますが、とりあえずよく使うであろうものをまとめています

autoplay(自動再生)

autoplayは自動再生させるときに使うパラメータで値を複数指定してより細かい設定ができるタイプで、使える細かい設定用のパラメータは以下のとおりです

バージョンによって変わってくるかもしれませんが値を細かく設定せずtrueにするとデフォルトの設定で動き出します

パラメータ名 デフォルト値 使える値や仕様
delay 3000 自動再生時スライドを切り替えるの間隔をミリ秒で指定
stopOnLastSlide false 最後のスライドまでいったときに自動再生が停止させるかどうか
(ループ時は無効)
disableOnInteraction true ユーザーがスライダーを操作したときに自動再生を止める設定
reverseDirection false 自動再生の方向を逆方向にする設定
waitForTransition true swiper-wrapperのトランジションが継続するのを待つ設定

autoplayを使うときの書式は以下のとおりです。
手っ取り早く自動作成させたい場合は値をtrueにすると簡単だと思います。

試しにスライド切替の間隔を1秒にして自動再生させてみます

swiper自動再生サンプル
1
2
3

navigation(矢印ナビ)

navigationはスライダーの左右に前後のスライドへ切り替えるためのボタンを設置するためのパラメータで、細かい設定が必要なパラメータになります。

使うための準備としてボタン用の要素を追加する必要があるので、まずはHTMLの方に要素を追加します。

このとき以下のサンプルコードのようにクラス名を『swiper-button-prev』『swiper-button-next』とすると予めcssで装飾されているので扱いやすいかもしれません。
が、デフォルト以外のクラスでも使えるので、ボタンのカスタマイズが必要な場合は位置調整を含め装飾する必要が出てきますが任意のクラスをつけると幸せになれるかもしれません

navigationで使えるパラメータは以下の通りになりますが、navigationを使う場合『prevEl』と『nextEl』の2つのパラメータの設定が必須になりますのでご注意してください

パラメータ名 デフォルト値 使える値や仕様
prevEl なし 前のスライドへ切り替えるをボタンで使う要素のクラス名をセレクタ形式の文字列で指定
クラス名を『swiper-button-prev』にするとデフォルトの装飾が使える
※ 必須
nextEl なし 次のスライドへ切り替えるをボタンで使う要素のクラス名をセレクタ形式の文字列で指定
クラス名を『swiper-button-next』にするとデフォルトの装飾が使える
※ 必須
hideOnClick false スライダー部分をクリックするとボタンに対してクラス『swiper-button-hidden』付け外ししてくれるパラメータ
クラス『swiper-button-hidden』にはそもそもcssが指定されていないので別途装飾が必要
hiddenClass ‘swiper-button-hidden’ hideOnClickがtrueのときに有効なパラメータで、ボタンに対して付け外しするクラス名を指定できる
disabledClass ‘swiper-button-disabled’ 前や次のスライドがない場合にボタンに付与するクラス名を指定できる
swiper前後へのボタンサンプル
1
2
3

左右矢印ボタンのカスタマイズ例

デフォルトで出てくる矢印ボタンをそのまま使うことはなさそうな気がしますので、矢印部分のカスタマイズ方法を紹介していきます。 まずはHTMLのコードから紹介

デフォルトのcssは必要なくなるので矢印ボタンになる要素には任意のクラス名を指定しておきます(今回はシンプルに「prev」と「next」にしました)

矢印用アイコンを別途用意するのが面倒だったのでボタンには文字を表示していきますが、アイコンを使う場合はそのまま作った要素の中にimg要素を入れる方法や背景画像としていれる方法でもうまくいくはずです(デフォルトは擬似要素を使っています)

navigation用で用意されているパラメータは3種類使います。
用意したボタンを使うための『prevEl』と『nextEl』にはそれぞれ用意した要素に付けたクラス名を指定しします。

前や次のスライドがない場合にボタンに付与するクラス名を指定できる『disabledClass』にはシンプルに「disabled」を指定しておきました
こうしておくと前や次のスライドがない場合にクラス「disabled」をボタンに付与してくれるので状況によっての装飾がしやすくなります。

後は『.prev』『.next』『.disabled』をcssで装飾すれば完了です。
参考にサンプルで作ってみたcssのコードも紹介しておきます。

矢印カスタマイズ例
1
2
3

スライダークリック時に前後ボタンを消す設定

navigationように用意されている『hideOnClick』を使うとスライダーをクリックしたときにそれぞれのボタンに対してデフォルトでクラス『swiper-button-hidden』を付け外しすることができます。

パラメータ名から察するにクリック時に一旦ボタンを消してスライド全体を見やすくするためのものだと思われますが、肝心のボタンを消すためのcssが用意されていません。

追々cssを追加されても困るので付け外しするクラス名を合わせて指定するように使い方を紹介しますがサンプルは矢印をカスタマイズしたときのものを流用していきます

HTMLは変更なしで以下のとおりです

以下のようにnavigation用で用意されているパラメータの『hideOnClick』と『hiddenClass』を使います

cssは他の似たようなパラメータに習ってシンプルに「opacity: 0;」だけで十分だと思います。
一応消すために用意されている機能ですが工夫次第では色々な事ができそうですね

スライダークリックでボタンを消すサンプル
1
2
3

pagination(ドットインジケーターなど)

paginationはスライダーにドットインジケーターやプログレスバー、スライド数表示などを設置するためのパラメータで、細かい設定が必要になります。

使うための準備としてpaginationを作成するための要素を追加する必要があるので、まずはHTMLの方に要素を追加します。

このとき以下のサンプルコードのようにクラス名を『swiper-pagination』とすると予めcssで装飾されているので扱いやすいかもしれません。

デフォルト以外のクラスでも使えますが、paginationのカスタマイズはかなり面倒になると思われますのでswiperのcssをサイトのcssで上書きする方法でカスタマイズするのをおすすめします

paginationでよく使うであろう細かい設定用のパラメータを以下にまとめていますがまだまだたくさんあります。
paginationを使う場合『el』のパラメータの設定が必須になりますのでご注意してください

パラメータ名 デフォルト値 使える値や仕様
el なし paginationで使う要素のクラス名をセレクタ形式の文字列で指定
クラス名を『swiper-pagination』にするとデフォルトの装飾が使える
※ 必須
type ‘bullets’ ページネーションのタイプを指定するパラメータ。
‘bullets’を指定するとドットインジケーター
‘fraction’を指定するとスライド数表示
‘progressbar’を指定するとプログレスバー
‘custom’は自分で作るタイプなので何も出てこない
以上4種類から選べる。
bulletElement ‘span’ typeのパラメータが’bullets’のときに有効なパラメータで、ドットを作る要素を指定できる
bulletClass ‘swiper-pagination-bullet’ typeのパラメータが’bullets’のときに有効なパラメータでドットに付与されるクラスを指定するパラメータ
bulletActiveClass ‘swiper-pagination-bullet-active’ typeのパラメータが’bullets’のときに有効なパラメータで表示中のスライドに対応したドットに付与されるクラスを指定するパラメータ
clickable false typeのパラメータが’bullets’のときに有効なパラメータでドットをクリックしたら対応するスライドに移動可能にするパラメータ
pagination用に用意した要素にクラス『swiper-pagination-clickable』が付与される
clickableClass ‘swiper-pagination-clickable’ typeのパラメータが’bullets’かつ、clickableがtrueのときに有効なパラメータでclickableように付与するクラス名を指定できるパラメータ
dynamicBullets false typeのパラメータが’bullets’のときに有効なパラメータでスライド数が多い場合ドットを省略させることが出来るパラメータでドットは表示中のスライドに対応しているものは大サイズ、その外側は中サイズ、更に外側は小サイズ、それ以外は省略される
dynamicMainBullets 1 typeのパラメータが’bullets’かつ、dynamicBulletsがtrueのときに有効なパラメータ大サイズで表示するドットの数を調整するパラメータ
currentClass ‘swiper-pagination-current’ typeのパラメータが’fraction’のときに有効なパラメータで表示中のスライドに対応している数字を表示する要素に付与するクラスを指定できる
totalClass ‘swiper-pagination-total’ typeのパラメータが’fraction’のときに有効なパラメータでスライドの総数を表示する要素に付与するクラスを指定できる
progressbarOpposite false typeのパラメータが’progressbar’のときに有効なパラメータでプログレスバーをスライダーが動く方向とは逆方向に動くようにする
progressbarOppositeClass ‘swiper-pagination-progressbar-opposite’ typeのパラメータが’progressbar’のときに有効なパラメータでプログレスバー全体になる要素へ付与するクラスを指定できる
progressbarFillClass ‘swiper-pagination-progressbar-fill’ typeのパラメータが’progressbar’のときに有効なパラメータでプログレスバー内の広がっていく部分の要素へ付与するクラスを指定できる
hideOnClick false スライダー部分をクリックするとpaginationに対してクラス『swiper-pagination-hidden』付け外ししてくれるパラメータで表示非表示用のcssが用意されているのでpaginationの表示状態を切り替えられる
hiddenClass ‘swiper-pagination-hidden’ hideOnClickで付け外しするクラス名を変更するパラメータ

『el』パラメータだけでも動いてくれるので今回用意したサンプルのHTMLでの手っ取り早く使う場合コードをまずは紹介していきます。

とりあえず『pagination』を使ったときの見た目は以下のようになります

デフォルトではドットインジケーターとして表示してくれますが、typeパラメータはきっちりと指定したほうが良さそうです

paginationのサンプル
1
2
3

ドットインジケーターをクリック可能にする

デフォルトのドットインジケーターは表示しているだけでクリックには対応していません。
クリックに対応させるためには『clickable』パラメータを「true」に指定する必要があります。

paginationのサンプル
1
2
3

ドットインジケーターが多いときに省略する

スライドの数が多いときドットインジケーターが多すぎて見栄えが悪くなることもあるかもしれません。

少し見た目が変わりますが、ドットインジケーターの数を省略させるパラメータが用意されていて『dynamicBullets』を「true」すると実現できます。

ドットインジケーターの数を増やすために以下のコードを使ってみます

dynamicBulletsのサンプル
1
2
3
4
5
6
7
8
9

ドットインジケーターをスライドの外側に表示する

デフォルトでドットインジケーターはスライダーの内部に表示されるようになっていますが、こちらをスライダーの外側に表示したい場合はcssのプロパティを一つ追加するだけで簡単に対応できます。

swiper全体を囲んでいるイニシャライズをする要素で今回使っているサンプルであれば『.swiper』に対して「padding-bottom」を指定するかpagination用要素のcssを上書きすることで解決します

なお、前者であればfaction(スライド数表示)も同様の設定でスライダーの外側に出すことができますが後者の場合都度設定が必要です

スライダー外部にドットインジケーターを表示
1
2
3

type:’faction’(スライド数表示)

typeに『fraction』を指定するとスライド数表示機能になります。 『faction』専用のパラメータは出力するクラスを変えるものしか現状なさそうです。

fraction(ページ数表示)サンプル
1
2
3

type:’progressbar’(プログレスバー)

typeにprogressbarを指定するとプログレスバーになります

progressbar(プログレスバー)サンプル
1
2
3

プログレスバーをスライダー下部に表示する

個人的な感想ですが上についているプログレスバーは見にくいです
スライダーの下部に移動させるにはcssを上書きする方法が手っ取り早いと思います

Chromeのデベロッパーツールでセレクタをコピペして以下のプロパティを追加すれば解決ができます。

プログレスバーをスライダー下部に表示したサンプル
1
2
3

プログレスバーをスライダーが動く方向とは逆方向に動くようにする

『progressbarOpposite』を「true」にすると横方向に動くスライダーであれば縦方向のプログレスバーになり、縦方向に動くスライダーであれば横方向に動くプログレスバーに変更させることができます

表示位置はコンテナの上から左に移ります

プログレスバーを縦にしてみました
1
2
3

縦にしたプログレスバーを右側に表示

『progressbarOpposite』を「true」にした際左側にくるプログレスバーを右に移動させるにはcssで調整します

Chromeのデベロッパーツールでセレクタをコピペして以下のプロパティを追加すれば解決ができます。

縦にしたプログレスバーを右側に表示したサンプル
1
2
3

スライダークリック時にpaginationを消す設定

paginationは基本スライダー上に表示されます
クリックしたときに消すことが出来るようにするには『hideOnClick』パラメータを「true」に指定します。

※ navigationで用意されているものとは違いこちらは予めcssが用意されているのでパラメータを追加するだけでOK

hideOnClickのサンプル
1
2
3

scrollbar(スクロールバー)

scrollbarはスライダーにスクロールバーを追加する細かい設定ができるパラメータです

使うための準備としてscrollbarを作成するための要素を追加する必要があるので、まずはHTMLの方に要素を追加します。

このとき以下のサンプルコードのようにクラス名を『swiper-scrollbar』とすると予めcssで装飾されているので扱いやすいかもしれません。

使えそうな細かい設定用のパラメータは以下のとおりですが、『el』のパラメータの設定が必須なのでご注意ください

パラメータ名 デフォルト値 使える値や仕様
el null scrollbarを使う要素を指定
draggable false trueにするとスクロールバーの操作が可能になる(デフォルトはスクロールバーを操作できない)
dragClass ‘swiper-scrollbar-drag’ スクロールバーの操作できる部分に付与するクラス名を変更することが出来る
dragSize ‘auto’ スクロールバーの操作できる部分のサイズを指定できるパラメータで単位はpx
数値だけでも指定できるし文字列形式ならpxの単位付きでも指定できる。デフォルトのautoは自動算出
snapOnRelease false trueに設定するとスクロールバーを離したときにスライダーの位置をスライドにスナップする

scrollbarを使うときに最低限必要なパラメータの書式は以下のとおりです。

draggableを有効にしておくとスクロールバーが操作できるようになるのでマストかと思います

scrollbarのサンプル
1
2
3

loop(スライダーのループ設定)

swiperのデフォルト設定でスライダーのループは無効になっています。
ループを有効にする場合は『loop』をtrueにする必要があります。

loopのサンプル
1
2
3

effect(スライドのエフェクト変更)

swiperのエフェクトのデフォルトはここまでのサンプルのようなカルーセルスライダーのような動きになっていますが、パラメータの『effect』を使うとエフェクトを変えることができます

デフォルトの’slide’以外には’fade’、’cube’、’coverflow’、’flip’、’cards’の5種類が手軽に使えるものとして用意されているのでサンプルとして表示しておきます。

fade

サンプルでfadeを使うために以下のようなコードを使ってみました

fadeのサンプル
1
2
3

fadeにはクロスフェードを有効にするためのパラメータも用意されていますのでこちらも紹介しておきます。

もともと無効(false)になっているので値をtrueにすると有効化できます
以下の書式になりますが、違いがわかりにくいと思うのは自分だけかもしれません

クロスフェードのサンプル
1
2
3

cube

サンプルでcubeを使うために以下のようなコードを使ってみました

cubeのサンプル
1
2
3

cubeを使った場合影を調整する『cubeEffect』パラメータが用意されていて細かい設定ができます

パラメータ名 デフォルト値 使える値や仕様
shadowOffset 20 スライダーのコンテナー下部につく影の広がり具合を指定
数値だけで指定し、単位はpxになる
shadowScale 0.94 スライダーのコンテナー下部につく影の大きさを指定
倍率を数値で指定する
shadow true エフェクト中スライダーのコンテナー下部につく影の有無を指定できる
slideShadows true エフェクト中スライドにつく影の有無を指定できる

影の大きさは『shadowOffset』と『shadowScale』を調整することができますが豪快にいじるとサンプルのようにはみ出しますので注意してください

cubeの影をいじったサンプル
1
2
3

そもそも影を消したい場合は『shadow』『slideShadows』を「false」にすると消すことができます。

cubeの影を消したサンプル
1
2
3

coverflow

サンプルでcoverflowを使うために以下のようなコードを使ってみました

coverflowのサンプル
1
2
3

coverflowを使った場合更に調整するための『coverflowEffect』パラメータが用意されていて細かい設定ができます

パラメータ名 デフォルト値 使える値や仕様
depth 100 スライド深さ(z軸)を指定
数値だけで指定し、単位はpxになる
modifier 1 エフェクトの倍率を指定できる
例)10とすると『coverflowEffect』の設定値がすべて10倍になる模様
rotate 30 エフェクト中スライドが回転する角度を指定
scale 1 エフェクト中のスライドの倍率を指定
slideShadows true エフェクト中スライドにつく影の有無を指定できる
slideShadows 0 スライド間の伸縮スペースを指定する
数値を増やすほどスライド間の隙間が減っている模様

以下のコードのように『depth』と『rotate』を調整すると奥の方から一回転して切り替わります

coverflowEffectのサンプル1
1
2
3

以下のコードのように『scale』を調整すると切り替わるときにおおきくなります

coverflowEffectのサンプル2
1
2
3

以下のコードのように『modifier』を調整するとデフォルト値が0以外のパラメータの効果が10倍になるようです

coverflowEffectのサンプル3
1
2
3

flip

サンプルでflipを使うために以下のようなコードを使ってみました

flipのサンプル
1
2
3

flipを使った場合更に調整するための『flipEffect』パラメータが用意されていて細かい設定ができますが、使えそうなパラメータは『slideShadows(他と同じように影の設定)』と『limitRotation(最初と最後のスライドの回転を制限する)』の2種類です。

cards

サンプルでcardsを使うために以下のようなコードを使ってみました

cardsのサンプル
1
2
3

cardsを使った場合更に調整するための『cardsEffect』パラメータが用意されていて細かい設定ができますが、使えそうなパラメータは『slideShadows(他と同じように影の設定)』と『rotate(回転の有無の設定)』の2種類です。

cardsEffectのサンプル
1
2
3

よく使いそうなswiperのパラメータ

ただただ表にまとめただけになりますが、基本パラメータは細かい設定はせず値だけで使えるものになります

パラメータ名 デフォルト値 使える値や仕様
allowSlideNext true 次のスライド方向(右または下)へのスワイプの有効/無効を設定するパラメータ
allowSlidePrev true 前のスライド方向(右または下)へのスワイプの有効/無効を設定するパラメータ
allowTouchMove true スワイプイベントの有効/無効を設定するパラメータ
autoHeight false 各スライドの高さに合わせてスライドが可変するかどうかを設定するパラメータ
breakpoints レスポンシブ対応するためブレークポイントごとに異なるパラメータを設定できる
breakpointsBase ‘window’ ブレークポイントの基準を指定できるパラメータ
‘container’にするとswiperのコンテナーが基準になる
centerInsufficientSlides false 有効にするとスライドの量がslidesPerView未満の場合スライドが中央に配置されます。
ループモードおよびgrid.rowsでの使用は意図されていません
centeredSlides false スライドの配置を中央にするかどうかのパラメータ
centeredSlidesBounds false スライドを中央配置にしたときに最初と最後の左右に隙間を開けて中央に配置するかどうかを指定するパラメータ
containerModifierClass ‘swiper-‘ swiperをイニシャライズする要素にモディファイアCSSクラスの開始点を指定するパラメータ
createElements false Swiperが有効な場合、自動的にスライドをswiper-wrapper要素でラップし、『navigation』『pagination』『scrollbar』に必要な要素を作成するかどうかを指定するパラメータ
それぞれにtrueを指定すると勝手に出力してくれる
cssMode false 有効にすると、最新のCSS Scroll Snap APIが使用されます。
Swiperの全機能をサポートしているわけではありません
direction ‘horizontal’ スライドの動き方を水平方向(’horizontal’)か垂直方向(’vertical’)のどちらかを選べる
edgeSwipeDetection false スワイプで戻る操作をできなくするかを指定するパラメータ
わかりにくいけれどスライドの端での操作ができなくなる模様
edgeSwipeThreshold 20 スワイプで戻る操作をできなくする範囲を数値のみ(pxが単位になる)指定するパラメータ
effect ‘slide’ スライドのエフェクトを指定するパラメータ
‘creative’ デフォルトの’slide’以外に’fade’、’cube’、’coverflow’、’flip’、’cards’、’creative’ が用意されています
enabled true Swiperが初期状態で有効かを指定するパラメータ
falseにすると操作を受け付けなくなる
focusableElements ‘input, select, option, textarea, button, video, label’ フォーカス可能な要素用のCSSセレクタ。
そのような要素がフォーカスされている場合スワイプは無効になります。
followFinger true スワイプ時の動作に関する指定
falseにした場合スワイプしている手を外したタイミングで動作する
grabCursor false trueにするとSwiperにカーソルを置いたときに指のカーソルが表示されるようになります
height null Swiperの高さを指定するためのパラメータ
height null Swiperの高さを指定するためのパラメータ
init true インスタンス作成時にSwiperを自動的に初期化するかどうかを指定する。falseの場合、swiper.init()を呼び出して初期化する必要がある。
initialSlide 0 最初のスライドのインデックス番号を指定する。
longSwipes true 長い時間のスワイプを無効にしたい場合はfalseを設定します。
longSwipesMs 300 長いスワイプの際に次の/前のスライドにスワイプするまでの最小時間
longSwipesRatio 0.5 長いスワイプの際に次の/前のスライドへのスワイプを誘発する割合
loop false ループさせたい場合はtrueに設定する
loopAdditionalSlides 0 ループ作成後にクローンされるスライドの追加枚数
loopFillGroupWithBlank false ループモードを有効にすると、スライド数が不足しているグループに空白のスライドを充填します。『slidesPerGroup』パラメータと一緒に使用すると便利らしいです。
loopPreventsSlide true trueにするとトランジションが既に進行している場合にSwiperスライドの前方/次方トランジションを防止します
loopedSlides null ループモードでslidesPerView:’auto’を使用する場合は、このパラメータを使用して、ループ(複製)するスライドの枚数をSwiperに指示する必要があります。
maxBackfaceHiddenSlides 10 スライドの合計数がここで指定した値より少ない場合、Swiperはスライド要素のbackface-visibility: hiddenを有効にしてSafariの視覚的な「フリッカー」を低減します。
nested false trueを設定すると、タッチイベントを正しく受けとることができます。親と同じ方向を使用するSwiperにのみ使用します。
noSwiping true noSwipingClassで指定されたクラスにマッチする要素に対してスワイプを行うか否かを指定する。
noSwipingClass ‘swiper-no-swiping’ noSwiping の要素の css クラスを指定する。
noSwipingSelector ‘swiper-no-swiping’ noSwipingClassの代わりに、スワイプを無効にする要素を指定するために使用することができます。
例えば ‘input’ は全ての入力に対してスワイプを無効化します。
normalizeSlideIndex true スライドインデックスをノーマライズする。
observeParents false Swiperの親要素のミューテーションも監視する必要がある場合はtrueを設定します。
observeSlideChildren false Swiperスライドの子要素のミューテーションも監視する必要がある場合はtrueに設定します。
observer false Swiperとその要素でMutation Observerを有効にするには、trueに設定します。この場合、Swiperのスタイルを変更したり(hide/showなど)、子要素を修正したり(スライドの追加/削除など)すると、その都度Swiperが更新(再初期化)されます。
on イベントハンドラの登録
passiveListeners true モバイルデバイスでのスクロールのパフォーマンスを向上させるため、可能な限りデフォルトでパッシブイベントリスナーが使用されます。
しかし、e.preventDefaultを使用する必要があり、それと衝突する場合は、このパラメータを無効にする必要があります
preloadImages true Swiperを有効にすると、すべての画像を強制的に読み込むようになります。
preventClicks true スワイプ中に誤ってリンクをクリックしないようにするためにtrueに設定します。
preventClicksPropagation true trueに設定すると、スワイプ中のリンクのclicksイベント伝搬を停止します。
preventInteractionOnTransition false trueにすると、遷移中にスワイプやナビゲーション/ページングボタンでスライドを変更できなくなる
resistance true レジスタントバウンズを無効にしたい場合はfalseを設定します。
resistanceRatio 0.85 このオプションは、抵抗比を制御することができます
resizeObserver true trueにすると、SwiperコンテナーでResizeObserver(ブラウザでサポートされている場合)を使用して、コンテナのリサイズを検出します
rewind false 巻き戻しモードを有効にするには、trueに設定します。
roundLengths false trueに設定すると、スライドの幅と高さの値を丸め、通常の解像度のスクリーンでテキストがぼやけないようにします。
runCallbacksOnInit true Swiperの初期化時にTransition/SlideChange/Start/Endイベントを発生させます
initialSlideが0でない場合や、loopモードを使用している場合、これらのイベントが初期化時に発生します。
setWrapperSize false このオプションを有効にすると、プラグインは、すべてのスライドの合計サイズと等しいSwiperラッパーの幅/高さを設定します。
shortSwipes true 短いスワイプを無効にしたい場合はfalseを設定します。
simulateTouch true Trueの場合、Swiperはタッチイベントのようなマウスイベントを受け付けます(クリック&ドラッグでスライドを変更)。
slideActiveClass ‘swiper-slide-active’ 現在アクティブなスライドのCSSクラス名
slideBlankClass ‘swiper-slide-invisible-blank’ loopFillGroupWithBlankも有効な場合、ループモードでグループを塗りつぶす際に追加される空白スライドのCSSクラス名。
slideClass ‘swiper-slide’ スライドのCSSクラス名
slideDuplicateActiveClass ‘swiper-slide-duplicate-active’ 現在アクティブなスライドを表す複製されたスライドのCSSクラス名
slideDuplicateClass ‘swiper-slide-duplicate’ ループモードで複製されるスライドのCSSクラス名
slideDuplicateNextClass ‘swiper-slide-duplicate-next’ アクティブなスライドの次のスライドを表す複製されたスライドのCSSクラス名
slideDuplicatePrevClass ‘swiper-slide-duplicate-prev’ アクティブなスライドの前のスライドを表す複製されたスライドのCSSクラス名
slideNextClass ‘swiper-slide-next’ 現在アクティブなスライドの直後に表示されるスライドのCSSクラス名
slidePrevClass ‘swiper-slide-prev’ 現在アクティブなスライドの直前に表示されるスライドのCSSクラス名
slideToClickedSlide false trueに設定し、任意のスライドをクリックすると、このスライドに遷移します。
slideVisibleClass ‘swiper-slide-visible’ 現在表示されているスライドのCSSクラス名
slidesOffsetAfter 0 コンテナの最後(全スライドの後)に追加のスライドオフセットを(pxで)追加する
slidesOffsetBefore 0 コンテナの最初(全スライドの前)に追加のスライドオフセットを(pxで)追加する
slidesPerGroup 1 グループスライドを定義し、有効にするためのスライド数を設定します。slidesPerView > 1で使用すると便利です。
slidesPerGroupAuto false このパラメータは、slidesPerView: ‘auto’と一緒に使うことを意図しています。’auto’ と slidesPerGroup: 1. 有効にすると、ビュー内のすべてのスライドを .slideNext() & .slidePrev() メソッド呼び出し時、ナビゲーション “ボタン” クリック時、および自動再生時にスキップするようになります。
slidesPerGroupSkip 0 このパラメータは次のように動作します。slidesPerGroupSkipが0(デフォルト)の場合、グループ化から除外されるスライドはなく、結果の動作はこの変更を行わない場合と同じになります。
slidesPerView 1 1ビューあたりのスライド数(スライダーのコンテナ上で同時に表示されるスライド数)。
spaceBetween 0 スライド間の距離(単位:px)。
speed 300 スライド間の遷移時間(単位:ms)
swipeHandler null スワイプ時にのみ利用可能なハンドラとして機能するページネーション付きコンテナの CSS セレクタまたは HTML 要素を含む文字列。
threshold 0 pxで指定する閾値。タッチ距離がこの値より小さい場合、スワイプは動きません。
touchAngle 45 タッチムーブのトリガーとなる許容角度(単位:度)
touchEventsTarget ‘wrapper’ タッチイベントを待機させる対象要素。コンテナ」(swiperのタッチイベントを監視する)または「ラッパー」(swiper-wrapperのタッチイベントを監視する)が可能です
touchMoveStopPropagation false trueに設定した場合、”touchmove “の伝搬を停止します。
touchRatio 1 タッチ比率
touchReleaseOnEdges false スライダーのエッジ位置(開始、終了)でタッチイベントを解除し、さらにページスクロールができるようにする。
touchStartForcePreventDefault false タッチスタート(ポインタダウン)イベントのデフォルトを常に防止するよう強制する。
touchStartPreventDefault true 無効の場合、タッチスタート(ポインタダウン)イベントは防止されない
uniqueNavElements true trueに設定した場合(デフォルト)、ナビゲーション要素のパラメータが文字列として渡されると(「.pagination」のように)、Swiperはまず子要素からそのような要素を探します。pagination、prev/nextボタン、scrollbar要素に適用されます。
updateOnImagesReady true trueに設定した場合(デフォルト)、すべての内部画像(タグ)が読み込まれた後に、Swiperが再初期化されます。必須 preloadImages: true
updateOnWindowResize true ウィンドウサイズ変更時にスライド位置の再計算を行うようにしました。
url null サーバーサイドでレンダリングされ、履歴が有効な場合、アクティブなスライド検出のために必要です。
userAgent null userAgent 文字列。サーバーサイドでレンダリングする際に、ブラウザ/デバイスの検出に必要です。
virtualTranslate false このオプションをtrueに設定すると、スイパーが移動しない以外は通常通り動作し、ラッパーの実際の平行移動の値も設定されなくなります。カスタムスライドを作成する際に便利です。
watchOverflow true Swiperを有効にすると、スライドが少ない場合にナビゲーションボタンを非表示にします。
watchSlidesProgress false この機能を有効にすると、各スライドの進行状況と可視性が計算されます(ビューポート内のスライドには、追加の可視クラスが表示されます)。
width null Swiperの幅(単位:px)。Swiperの幅を強制的に変更するためのパラメータです。Swiperを非表示にした状態で初期化する場合、およびSSRやTest環境でSwiperを正しく初期化する場合のみ有効です。
wrapperClass ‘swiper-wrapper’ スライドラッパーのCSSクラス名
onAny すべてのイベントに対して起動するイベントリスナーを追加します。

direction(スライドの切り替え方向)

デフォルトでは横方向に切り替わるスライドを縦方向に変更できるパラメータは『direction』です

値はデフォルトの『’horizontal’』と縦方向に変更できる『’vertical’』が用意されていますがeffectをfadeにしていると何も起こりません

vertical(slide)のサンプル
1
2
3
vertical(cube)のサンプル
1
2
3
vertical(coverflow)のサンプル
1
2
3
vertical(flip)のサンプル
1
2
3
vertical(cards)のサンプル
1
2
3

allowTouchMove(スワイプイベントの有無)

スワイプによるユーザーの操作を受け付けたくない場合は『allowTouchMove』のパラメータを「false」にするとスワイプができなくなります

スワイプ無効のサンプル
1
2
3

slidesPerView(表示されるスライド数)

『slidesPerView』はスライダーコンテナー上に表示するスライド数を指定するパラメータで、値は数値を指定して使います。

デフォルトは1で小数点を使うこともできます

slidesPerViewのサンプル1
1
2
3

以下のように使うとコンテナー内に1.5枚分表示させる設定になり、次のスライドが半分見切れるような感じにできます。
loopと一緒に利用するといい感じだと思います。

slidesPerViewのサンプル2
1
2
3

centeredSlides(アクティブなスライドを中央配置)

『centeredSlides』スライドの配置を中央にするかどうかのパラメータで、デフォルト値は「false」です。

trueにすると、アクティブなスライドは左側ではなく、中央に配置されます。

slidesPerView』と合わせて使うと前後スライドが見切れるような表現ができます。

以下のサンプルだと『slidesPerView』を1.5としているので前後に2.5割づつ表示されるようになります

slidesPerViewのサンプル
1
2
3

カスタマイズ例

何例かカスタマイズ例を残しておきます

サムネイル付きスライダー

サムネイル付きスライダーのサンプル
1
2
3
4
5
6
7
1
2
3
4
5
6
7

無限ループスクロール

無限ループスクロールのサンプル
1
2
3

随時更新していきます

PROFILE

フリーランスでweb系のデザイン・コーディング&プログラミングをしています

youtubeはじめました