swiper.js（8.1.4）の使い方を紹介してみる
ありがたいことに当サイトでは『slick』に関する記事が人気で、スライダー系の人気はまだまだ健在なのかと感じる今日このごろ
ちょっと前の案件で動きの参考に提示されたサイトと同じものを使ってくれとのことでswiper.jsを初めて使ったのですが、パラメータが多すぎてあんまりよくわからなかったので後学のために使い方をまとめてみます。
この記事ではそもそもの使い方と、よく使うであろうパラメータの使い方を紹介していきます
この記事の目次
swiperを使うための準備
swiperを使う準備としてjs・cssファイルを読み込めるよう準備をする必要があります。
以下のリンクから公式サイトへ移動し必要なファイルをDLするか、CDNのコードをコピーしてきましょう。
サンプルとしてCDNを使った方法で紹介していきますのでCDNのコードをコピーすることができたらhead要素内に配置しておきます。
ちなみにswiperはjQueryに依存していないのでjQueryは必要ありません
|
1 2 3 4 5 6 7 |
<head> <meta charset="UTF-8"> <title>swiper</title> <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" /> <link rel="stylesheet" href="style.css"> <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script> </head> |
実際にswiperを動かす部分のHTMLのコードはルールが決まっているようなので基本コピペするといいでしょう
class=”swiper”の部分は全体を囲むための要素で任意のクラス名をつけて大丈夫で、イニシャライズするときに使う要素になります
class=”swiper-wrapper”はスライドをまとめるための要素でクラス名は固定
class=”swiper-slide”はスライド部分用のクラスになります。
今回ページ内に大量にサンプルを投下していく都合上画像は使いませんが、画像を使う場合はdiv要素にクラス『swiper-slide』つけてその子要素としてimg要素を入れるか、img要素にクラス『swiper-slide』つけてクラス『swiper-wrapper』の子要素として入れても問題なく動きます。
|
1 2 3 4 5 6 7 |
<div class="swiper"><!--このクラス名は任意のものでOK--> <div class="swiper-wrapper"> <div class="swiper-slide">1</div> <div class="swiper-slide">2</div> <div class="swiper-slide">3</div> </div> </div> |
コンテナサイズを指定したい場合はクラス『swiper』に対して幅を指定します。
今回のサンプルでは100%で使いたいので指定はしませんが任意の大きさにしたいときはこちらに指定してください。
あわせて「overflow: hidden;」も設定しておくとスライドがはみ出ることがなくなるので私はつけています
|
1 2 3 4 |
.swiper { width: 80%; overflow: hidden; } |
swiperの使い方
swiperをイニシャライズするためのコードは以下のようになります
これでswiperはスライダーとして機能してくれますがスワイプやドラッグでスライドを送る機能しかありません
|
1 2 3 |
<script> var swiper = new Swiper('.swiper'); </script> |
swiperに機能をつけるにはオプションがパラメータやモジュールという形で用意されていて、このパラメータやモジュールを指定して行いますので、その書式をまずは紹介しておきます
パラメータやモジュールを指定する場合はイニシャライズする要素を指定したあとにカンマをうち{}を続けます
パラメータやモジュールは{}の中にオブジェクトの形で入れていきます
パラメータやモジュールによっては値を複数指定して細かい設定が可能なものもありますが、値の方の{}の中にパラメータorモジュール：値の形で記述します
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> var swiper = new Swiper('.swiper',{ パラメータorモジュール1:値, パラメータorモジュール2:値, //値を複数指定してより細かい設定ができるもの パラメータ3:{ パラメータorモジュール3-1:値, パラメータorモジュール3-2:値 } }); </script> |
よく使いそうなswiperのモジュール
ここで紹介しているもの以外にも用意されていますが、とりあえずよく使うであろうものをまとめています
autoplay（自動再生）
autoplayは自動再生させるときに使うパラメータで値を複数指定してより細かい設定ができるタイプで、使える細かい設定用のパラメータは以下のとおりです
バージョンによって変わってくるかもしれませんが値を細かく設定せずtrueにするとデフォルトの設定で動き出します
| パラメータ名 | デフォルト値 | 使える値や仕様 |
|---|---|---|
| delay | 3000 | 自動再生時スライドを切り替えるの間隔をミリ秒で指定 |
| stopOnLastSlide | false | 最後のスライドまでいったときに自動再生が停止させるかどうか （ループ時は無効） |
| disableOnInteraction | true | ユーザーがスライダーを操作したときに自動再生を止める設定 |
| reverseDirection | false | 自動再生の方向を逆方向にする設定 |
| waitForTransition | true | swiper-wrapperのトランジションが継続するのを待つ設定 |
autoplayを使うときの書式は以下のとおりです。
手っ取り早く自動作成させたい場合は値をtrueにすると簡単だと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> //デフォルト設定で動かす場合1 var swiper = new Swiper('.swiper',{ autoplay:true, }); //デフォルト設定で動かす場合2 var swiper = new Swiper('.swiper',{ autoplay:{}, }); //細かく設定する場合 var swiper = new Swiper('.swiper',{ autoplay:{ autoplayのパラメータ1:値, autoplayのパラメータ2:値, } }); </script> |
試しにスライド切替の間隔を1秒にして自動再生させてみます
|
1 2 3 4 5 6 7 |
<script> var swiper = new Swiper('.swiper',{ autoplay:{ delay: 1000, } }); </script> |
navigationはスライダーの左右に前後のスライドへ切り替えるためのボタンを設置するためのパラメータで、細かい設定が必要なパラメータになります。
使うための準備としてボタン用の要素を追加する必要があるので、まずはHTMLの方に要素を追加します。
このとき以下のサンプルコードのようにクラス名を『swiper-button-prev』『swiper-button-next』とすると予めcssで装飾されているので扱いやすいかもしれません。
が、デフォルト以外のクラスでも使えるので、ボタンのカスタマイズが必要な場合は位置調整を含め装飾する必要が出てきますが任意のクラスをつけると幸せになれるかもしれません
|
1 2 3 4 5 6 7 8 9 |
<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">1</div> <div class="swiper-slide">2</div> <div class="swiper-slide">3</div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> |
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’ | 前や次のスライドがない場合にボタンに付与するクラス名を指定できる |
左右矢印ボタンのカスタマイズ例
デフォルトで出てくる矢印ボタンをそのまま使うことはなさそうな気がしますので、矢印部分のカスタマイズ方法を紹介していきます。 まずはHTMLのコードから紹介
デフォルトのcssは必要なくなるので矢印ボタンになる要素には任意のクラス名を指定しておきます（今回はシンプルに「prev」と「next」にしました）
矢印用アイコンを別途用意するのが面倒だったのでボタンには文字を表示していきますが、アイコンを使う場合はそのまま作った要素の中にimg要素を入れる方法や背景画像としていれる方法でもうまくいくはずです（デフォルトは擬似要素を使っています）
|
1 2 3 4 5 6 7 8 9 |
<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">1</div> <div class="swiper-slide">2</div> <div class="swiper-slide">3</div> </div> <div class="prev">PREV</div> <div class="next">NEXT</div> </div> |
navigation用で用意されているパラメータは3種類使います。
用意したボタンを使うための『prevEl』と『nextEl』にはそれぞれ用意した要素に付けたクラス名を指定しします。
前や次のスライドがない場合にボタンに付与するクラス名を指定できる『disabledClass』にはシンプルに「disabled」を指定しておきました
こうしておくと前や次のスライドがない場合にクラス「disabled」をボタンに付与してくれるので状況によっての装飾がしやすくなります。
|
1 2 3 4 5 6 7 8 9 |
<script> var swiper = new Swiper('.swiper',{ navigation: { prevEl: '.prev',//前へのボタンに使う要素 nextEl: '.next',//次へのボタンに使う要素 disabledClass:'disabled'//前や次にスライドがない場合にボタンに付与するクラスを指定 } }); </script> |
後は『.prev』『.next』『.disabled』をcssで装飾すれば完了です。
参考にサンプルで作ってみたcssのコードも紹介しておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.prev,.next{ width: 50px; background-color: #fff; font-size: 12px; line-height: 40px; text-align: center; position: absolute; top: calc(50% - 20px); z-index: 10; cursor: pointer; } .prev{ left: 0; } .next{ right: 0; } .disabled{ opacity: .3; cursor: default; } |
スライダークリック時に前後ボタンを消す設定
navigationように用意されている『hideOnClick』を使うとスライダーをクリックしたときにそれぞれのボタンに対してデフォルトでクラス『swiper-button-hidden』を付け外しすることができます。
パラメータ名から察するにクリック時に一旦ボタンを消してスライド全体を見やすくするためのものだと思われますが、肝心のボタンを消すためのcssが用意されていません。
追々cssを追加されても困るので付け外しするクラス名を合わせて指定するように使い方を紹介しますがサンプルは矢印をカスタマイズしたときのものを流用していきます
HTMLは変更なしで以下のとおりです
|
1 2 3 4 5 6 7 8 9 |
<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">1</div> <div class="swiper-slide">2</div> <div class="swiper-slide">3</div> </div> <div class="prev">PREV</div> <div class="next">NEXT</div> </div> |
以下のようにnavigation用で用意されているパラメータの『hideOnClick』と『hiddenClass』を使います
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> var swiper = new Swiper('.swiper',{ navigation: { prevEl: '.prev', nextEl: '.next', disabledClass:'disabled', hideOnClick:true,//クリック時にクラスを付け外しする hiddenClass:'hidden'//付け外しするクラスを指定 } }); </script> |
cssは他の似たようなパラメータに習ってシンプルに「opacity: 0;」だけで十分だと思います。
一応消すために用意されている機能ですが工夫次第では色々な事ができそうですね
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.prev,.next{ width: 50px; background-color: #fff; font-size: 12px; line-height: 40px; text-align: center; position: absolute; top: calc(50% - 20px); z-index: 10; cursor: pointer; } .prev{ left: 0; } .next{ right: 0; } .disabled{ opacity: .3; cursor: default; } .hidden{ opacity: 0; } |
pagination（ドットインジケーターなど）
paginationはスライダーにドットインジケーターやプログレスバー、スライド数表示などを設置するためのパラメータで、細かい設定が必要になります。
使うための準備としてpaginationを作成するための要素を追加する必要があるので、まずはHTMLの方に要素を追加します。
このとき以下のサンプルコードのようにクラス名を『swiper-pagination』とすると予めcssで装飾されているので扱いやすいかもしれません。
デフォルト以外のクラスでも使えますが、paginationのカスタマイズはかなり面倒になると思われますのでswiperのcssをサイトのcssで上書きする方法でカスタマイズするのをおすすめします
|
1 2 3 4 5 6 7 8 |
<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">1</div> <div class="swiper-slide">2</div> <div class="swiper-slide">3</div> </div> <div class="swiper-pagination"></div> </div> |
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での手っ取り早く使う場合コードをまずは紹介していきます。
|
1 2 3 4 5 6 7 |
<script> var swiper = new Swiper('.swiper',{ pagination: { el:'.swiper-pagination', } }); </script> |
とりあえず『pagination』を使ったときの見た目は以下のようになります
デフォルトではドットインジケーターとして表示してくれますが、typeパラメータはきっちりと指定したほうが良さそうです
ドットインジケーターをクリック可能にする
デフォルトのドットインジケーターは表示しているだけでクリックには対応していません。
クリックに対応させるためには『clickable』パラメータを「true」に指定する必要があります。
|
1 2 3 4 5 6 7 8 9 |
<script> var swiper = new Swiper('.swiper',{ pagination: { el:'.swiper-pagination', type:'bullets', clickable:true, } }); </script> |
ドットインジケーターが多いときに省略する
スライドの数が多いときドットインジケーターが多すぎて見栄えが悪くなることもあるかもしれません。
少し見た目が変わりますが、ドットインジケーターの数を省略させるパラメータが用意されていて『dynamicBullets』を「true」すると実現できます。
ドットインジケーターの数を増やすために以下のコードを使ってみます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">1</div> <div class="swiper-slide">2</div> <div class="swiper-slide">3</div> <div class="swiper-slide">4</div> <div class="swiper-slide">5</div> <div class="swiper-slide">6</div> <div class="swiper-slide">7</div> <div class="swiper-slide">8</div> <div class="swiper-slide">9</div> </div> <div class="swiper-pagination"></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 |
<script> var swiper = new Swiper('.swiper',{ pagination: { el:'.swiper-pagination', type:'bullets', clickable:true, dynamicBullets:true, } }); </script> |
ドットインジケーターをスライドの外側に表示する
デフォルトでドットインジケーターはスライダーの内部に表示されるようになっていますが、こちらをスライダーの外側に表示したい場合はcssのプロパティを一つ追加するだけで簡単に対応できます。
swiper全体を囲んでいるイニシャライズをする要素で今回使っているサンプルであれば『.swiper』に対して「padding-bottom」を指定するかpagination用要素のcssを上書きすることで解決します
なお、前者であればfaction（スライド数表示）も同様の設定でスライダーの外側に出すことができますが後者の場合都度設定が必要です
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//faction（スライド数表示）も一括で調整できる設定 .swiper { width: 100%; position: relative; padding-bottom: 30px; } //Chromeのデベロッパーツールでセレクタをコピペして使えば確実 .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal { position: relative; margin-top: 20px; } |
type:’faction’（スライド数表示）
typeに『fraction』を指定するとスライド数表示機能になります。 『faction』専用のパラメータは出力するクラスを変えるものしか現状なさそうです。
|
1 2 3 4 5 6 7 8 |
<script> var swiper = new Swiper('.swiper',{ pagination: { el:'.swiper-pagination', type:'fraction', } }); </script> |
type:’progressbar’（プログレスバー）
typeにprogressbarを指定するとプログレスバーになります
|
1 2 3 4 5 6 7 8 |
<script> var swiper = new Swiper('.swiper',{ pagination: { el:'.swiper-pagination', type:'progressbar', } }); </script> |
プログレスバーをスライダー下部に表示する
個人的な感想ですが上についているプログレスバーは見にくいです
スライダーの下部に移動させるにはcssを上書きする方法が手っ取り早いと思います
Chromeのデベロッパーツールでセレクタをコピペして以下のプロパティを追加すれば解決ができます。
|
1 2 3 |
.swiper-pagination.swiper-pagination-progressbar.swiper-pagination-horizontal{ position:relative; } |
プログレスバーをスライダーが動く方向とは逆方向に動くようにする
『progressbarOpposite』を「true」にすると横方向に動くスライダーであれば縦方向のプログレスバーになり、縦方向に動くスライダーであれば横方向に動くプログレスバーに変更させることができます
表示位置はコンテナの上から左に移ります
|
1 2 3 4 5 6 7 8 9 |
<script> var swiper = new Swiper('.swiper',{ pagination: { el:'.swiper-pagination', type:'progressbar', progressbarOpposite:true, } }); </script> |
縦にしたプログレスバーを右側に表示
『progressbarOpposite』を「true」にした際左側にくるプログレスバーを右に移動させるにはcssで調整します
Chromeのデベロッパーツールでセレクタをコピペして以下のプロパティを追加すれば解決ができます。
|
1 2 3 4 |
.swiper-pagination.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite{ left: auto; right: 0; } |
スライダークリック時にpaginationを消す設定
paginationは基本スライダー上に表示されます
クリックしたときに消すことが出来るようにするには『hideOnClick』パラメータを「true」に指定します。
※ navigationで用意されているものとは違いこちらは予めcssが用意されているのでパラメータを追加するだけでOK
|
1 2 3 4 5 6 7 8 9 |
<script> var swiper = new Swiper('.swiper',{ pagination: { el:'.swiper-pagination', type:'bullets', hideOnClick:true, } }); </script> |
scrollbar（スクロールバー）
scrollbarはスライダーにスクロールバーを追加する細かい設定ができるパラメータです
使うための準備としてscrollbarを作成するための要素を追加する必要があるので、まずはHTMLの方に要素を追加します。
このとき以下のサンプルコードのようにクラス名を『swiper-scrollbar』とすると予めcssで装飾されているので扱いやすいかもしれません。
|
1 2 3 4 5 6 7 8 |
<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">1</div> <div class="swiper-slide">2</div> <div class="swiper-slide">3</div> </div> <div class="swiper-scrollbar"></div> </div> |
使えそうな細かい設定用のパラメータは以下のとおりですが、『el』のパラメータの設定が必須なのでご注意ください
| パラメータ名 | デフォルト値 | 使える値や仕様 |
|---|---|---|
| el | null | scrollbarを使う要素を指定 |
| draggable | false | trueにするとスクロールバーの操作が可能になる（デフォルトはスクロールバーを操作できない） |
| dragClass | ‘swiper-scrollbar-drag’ | スクロールバーの操作できる部分に付与するクラス名を変更することが出来る |
| dragSize | ‘auto’ | スクロールバーの操作できる部分のサイズを指定できるパラメータで単位はpx 数値だけでも指定できるし文字列形式ならpxの単位付きでも指定できる。デフォルトのautoは自動算出 |
| snapOnRelease | false | trueに設定するとスクロールバーを離したときにスライダーの位置をスライドにスナップする |
scrollbarを使うときに最低限必要なパラメータの書式は以下のとおりです。
draggableを有効にしておくとスクロールバーが操作できるようになるのでマストかと思います
|
1 2 3 4 5 6 7 8 |
<script> var swiper = new Swiper('.swiper',{ scrollbar: { el: '.swiper-scrollbar', draggable: true, }, }); </script> |
loop（スライダーのループ設定）
swiperのデフォルト設定でスライダーのループは無効になっています。
ループを有効にする場合は『loop』をtrueにする必要があります。
|
1 2 3 4 5 6 7 8 |
<script> var swiper = new Swiper('.swiper',{ loop:true, pagination: { el: '.swiper-pagination', }, }); </script> |
effect（スライドのエフェクト変更）
swiperのエフェクトのデフォルトはここまでのサンプルのようなカルーセルスライダーのような動きになっていますが、パラメータの『effect』を使うとエフェクトを変えることができます
デフォルトの’slide’以外には’fade’、’cube’、’coverflow’、’flip’、’cards’の5種類が手軽に使えるものとして用意されているのでサンプルとして表示しておきます。
fade
サンプルでfadeを使うために以下のようなコードを使ってみました
|
1 2 3 4 5 6 7 8 9 |
<script> var swiper = new Swiper('.swiper',{ effect:'fade', scrollbar: { el: '.swiper-scrollbar', draggable: true, }, }); </script> |
fadeにはクロスフェードを有効にするためのパラメータも用意されていますのでこちらも紹介しておきます。
もともと無効（false）になっているので値をtrueにすると有効化できます
以下の書式になりますが、違いがわかりにくいと思うのは自分だけかもしれません
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> var swiper = new Swiper('.swiper',{ effect:'fade', fadeEffect: { crossFade: true }, scrollbar: { el: '.swiper-scrollbar', draggable: true, }, }); </script> |
cube
サンプルでcubeを使うために以下のようなコードを使ってみました
|
1 2 3 4 5 6 7 8 9 |
<script> var swiper = new Swiper('.swiper',{ effect:'cube', scrollbar: { el: '.swiper-scrollbar', draggable: true, }, }); </script> |
cubeを使った場合影を調整する『cubeEffect』パラメータが用意されていて細かい設定ができます
| パラメータ名 | デフォルト値 | 使える値や仕様 |
|---|---|---|
| shadowOffset | 20 | スライダーのコンテナー下部につく影の広がり具合を指定 数値だけで指定し、単位はpxになる |
| shadowScale | 0.94 | スライダーのコンテナー下部につく影の大きさを指定 倍率を数値で指定する |
| shadow | true | エフェクト中スライダーのコンテナー下部につく影の有無を指定できる |
| slideShadows | true | エフェクト中スライドにつく影の有無を指定できる |
影の大きさは『shadowOffset』と『shadowScale』を調整することができますが豪快にいじるとサンプルのようにはみ出しますので注意してください
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> var swiper = new Swiper('.swiper',{ effect:'cube', cubeEffect: { shadowOffset:10, shadowScale:1.2 }, scrollbar: { el: '.swiper-scrollbar', draggable: true, }, }); </script> |
そもそも影を消したい場合は『shadow』『slideShadows』を「false」にすると消すことができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> var swiper = new Swiper('.swiper',{ effect:'cube', cubeEffect: { slideShadows: false, shadow: false, }, scrollbar: { el: '.swiper-scrollbar', draggable: true, }, }); </script> |
coverflow
サンプルでcoverflowを使うために以下のようなコードを使ってみました
|
1 2 3 4 5 6 7 8 9 |
<script> var swiper = new Swiper('.swiper',{ effect:'coverflow', scrollbar: { el: '.swiper-scrollbar', draggable: true, }, }); </script> |
coverflowを使った場合更に調整するための『coverflowEffect』パラメータが用意されていて細かい設定ができます
| パラメータ名 | デフォルト値 | 使える値や仕様 |
|---|---|---|
| depth | 100 | スライド深さ（z軸）を指定 数値だけで指定し、単位はpxになる |
| modifier | 1 | エフェクトの倍率を指定できる 例）10とすると『coverflowEffect』の設定値がすべて10倍になる模様 |
| rotate | 30 | エフェクト中スライドが回転する角度を指定 |
| scale | 1 | エフェクト中のスライドの倍率を指定 |
| slideShadows | true | エフェクト中スライドにつく影の有無を指定できる |
| slideShadows | 0 | スライド間の伸縮スペースを指定する 数値を増やすほどスライド間の隙間が減っている模様 |
以下のコードのように『depth』と『rotate』を調整すると奥の方から一回転して切り替わります
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> var swiper = new Swiper('.swiper',{ effect: 'coverflow', coverflowEffect: { depth: 3000, rotate: 360, }, scrollbar: { el: '.swiper-scrollbar', draggable: true, }, }); </script> |
以下のコードのように『scale』を調整すると切り替わるときにおおきくなります
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> var swiper = new Swiper('.swiper',{ effect: 'coverflow', coverflowEffect: { scale:10, }, scrollbar: { el: '.swiper-scrollbar', draggable: true, }, }); </script> |
以下のコードのように『modifier』を調整するとデフォルト値が0以外のパラメータの効果が10倍になるようです
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> var swiper = new Swiper('.swiper',{ effect: 'coverflow', coverflowEffect: { modifier:10, }, scrollbar: { el: '.swiper-scrollbar', draggable: true, }, }); </script> |
flip
サンプルでflipを使うために以下のようなコードを使ってみました
|
1 2 3 4 5 6 7 8 9 |
<script> var swiper = new Swiper('.swiper',{ effect:'flip', scrollbar: { el: '.swiper-scrollbar', draggable: true, }, }); </script> |
flipを使った場合更に調整するための『flipEffect』パラメータが用意されていて細かい設定ができますが、使えそうなパラメータは『slideShadows（他と同じように影の設定）』と『limitRotation（最初と最後のスライドの回転を制限する）』の2種類です。
cards
サンプルでcardsを使うために以下のようなコードを使ってみました
|
1 2 3 4 5 6 7 8 9 |
<script> var swiper = new Swiper('.swiper',{ effect:'cards', scrollbar: { el: '.swiper-scrollbar', draggable: true, }, }); </script> |
cardsを使った場合更に調整するための『cardsEffect』パラメータが用意されていて細かい設定ができますが、使えそうなパラメータは『slideShadows（他と同じように影の設定）』と『rotate（回転の有無の設定）』の2種類です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> var swiper = new Swiper('.swiper',{ effect:'cards', cardsEffect: { rotate:false,//デフォルトはtrue slideShadows:false,//デフォルトはtrue }, scrollbar: { el: '.swiper-scrollbar', draggable: true, }, }); </script> |
よく使いそうな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にしていると何も起こりません
allowTouchMove(スワイプイベントの有無)
スワイプによるユーザーの操作を受け付けたくない場合は『allowTouchMove』のパラメータを「false」にするとスワイプができなくなります
|
1 2 3 4 5 6 7 |
<script> var swiper = new Swiper('.swiper',{ autoplay:true, loop:true, allowTouchMove:false, }); </script> |
slidesPerView（表示されるスライド数）
『slidesPerView』はスライダーコンテナー上に表示するスライド数を指定するパラメータで、値は数値を指定して使います。
デフォルトは1で小数点を使うこともできます
|
1 2 3 4 5 6 7 8 9 |
<script> var swiper = new Swiper('.swiper',{ loop:true, slidesPerView:2, pagination: { el: '.swiper-pagination', }, }); </script> |
以下のように使うとコンテナー内に1.5枚分表示させる設定になり、次のスライドが半分見切れるような感じにできます。
loopと一緒に利用するといい感じだと思います。
|
1 2 3 4 5 6 7 8 9 |
<script> var swiper = new Swiper('.swiper',{ loop:true, slidesPerView:1.5, pagination: { el: '.swiper-pagination', }, }); </script> |
centeredSlides（アクティブなスライドを中央配置）
『centeredSlides』スライドの配置を中央にするかどうかのパラメータで、デフォルト値は「false」です。
trueにすると、アクティブなスライドは左側ではなく、中央に配置されます。
『slidesPerView』と合わせて使うと前後スライドが見切れるような表現ができます。
以下のサンプルだと『slidesPerView』を1.5としているので前後に2.5割づつ表示されるようになります
|
1 2 3 4 5 6 7 8 9 10 |
<script> var swiper = new Swiper('.swiper',{ loop:true, slidesPerView:1.5, centeredSlides: true, pagination: { el: '.swiper-pagination', }, }); </script> |
カスタマイズ例
何例かカスタマイズ例を残しておきます
サムネイル付きスライダー
無限ループスクロール
随時更新していきます
