【Swiper】カスタマイズ用オプションまとめ一覧

Swiperのカスタマイズ用オプションってどんなのがあるの？

今回はそんな疑問にお答えします。

スライダーを簡単に実装できるプラグインとして有名なSwiperですが、オプションが色々ありかなり幅広くカスタマイズ可能です。

Swiperの基本的な使い方についてはこちらの記事を参照下さい。

あわせて読みたい

: 【2024年最新Ver11】Swiperの使い方とよく使うオプション・カスタマイズ方法を解説
続きを見る

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

30日間でWeb制作を学べる
完全無料
現役エンジニアへの質問無制限
オンラインの動画学習なので時間場所を問わず勉強可能
最大4回の学習サポート面談
受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼完全無料／

ZeroPlus Gate公式サイト

先着1日25名まで！

Swiperのカスタマイズ用オプションまとめ一覧

早速ですがオプションの一覧をご紹介します。

個人的に良く使う物は赤字で、特に良く使う物は太字にしています。

オプション内容については主に公式サイトをDeepLで翻訳したものになり、基本的に使わないオプションも多く含まれています。

大量に書いていますがこれでも全部ではないので、全部知りたい人は公式サイトを参照下さい（書き方も載っています）

公式サイトには『パラメータ』と『モジュール』で分けられていますが、分かりやすくする為にどちらも『オプション』と書いています

基本のオプション

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

class名のオプション

オプション名	初期値	内容
containerModifierClass	'swiper-'	Swiper全体を囲むdivタグのclass名を指定
lazyPreloaderClass	'swiper-lazy-preloader'	遅延プリローダのclass名を指定
noSwipingClass	'swiper-no-swiping'	noSwiping の要素のclass名を指定
slideActiveClass	'swiper-slide-active'	現在アクティブなスライドのclass名を指定
slideClass	'swiper-slide'	スライドのclass名を指定
slideNextClass	'swiper-slide-next'	現在アクティブなスライドの直後に表示されるスライドのclass名を指定
slidePrevClass	'swiper-slide-prev'	現在アクティブなスライドの直前に表示されるスライドのclass名を指定
slideVisibleClass	'swiper-slide-visible'	現在表示されているスライドのclass名を指定
wrapperClass	'swiper-wrapper'	スライドラッパーのclass名を指定

class名のオプションはいくつかありますが、例として『containerModifierClass』で解説します。

Swiper全体を囲っているdivタグのclass名は以下になります。

<div class="swiper swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden">

設定はデフォルトでcontainerModifierClass: 'swiper-'となり、これをcontainerModifierClass: 'test-'とすると以下になります。

<div class="swiper test-initialized test-horizontal test-pointer-events test-backface-hidden">

このように最初のswiperは変わりませんが、それ以外のclass名の頭を変更可能です。

しかし、class名を変えてしまうと特に複数人で実装する場合に分からなくなってしまう危険があるので、変更しない方がいいでしょう。

navigation（前へ次への矢印のオプション）

オプション名	初期値	内容
disabledClass	'swiper-button-disabled'	前後のスライドがない場合にボタンに class名を指定。
enabled	なし	特定のブレイクポイントでナビゲーションを有効/無効にするためにブレイクポイントで使用するブール値プロパティ。
hiddenClass	'swiper-button-hidden'	ナビゲーションボタンが非表示になった際に class名を指定。
hideOnClick	false	スライダーのコンテナをクリックしたらナビゲーションボタンの表示・非表示切替。
lockClass	'swiper-button-lock'	ナビゲーションボタンが無効の場合、 class名を指定。
navigationDisabledClass	'swiper-navigation-disabled'	ブレークポイントによりナビゲーションが無効化された場合、swiper containerに class名を指定。
nextEl	null	次のスライドへ切り替えるボタンのclass名を指定。『swiper-button-next』にすると、デフォルトのスタイルが使える。これを設定しないと矢印は表示されない。
prevEl	null	前のスライドへ切り替えるボタンのclass名を指定。『swiper-button-prev』にすると、デフォルトのスタイルが使える。これを設定しないと矢印は表示されない。

pagination（ドットインジケーターのオプション）

オプション名	初期値	内容
bulletActiveClass	'swiper-pagination-bullet-active'	typeが’bullets’のときに有効なパラメータで、表示中のスライドに対応したドットのclass名を指定。
bulletClass	'swiper-pagination-bullet'	typeが’bullets’のときに有効なパラメータで、ドットのclass名を指定。
bulletElement	'span'	typeが’bullets’のときに有効なパラメータで、ドットを作る要素を指定。
clickable	false	typeが’bullets’のときに有効なパラメータで、ドットをクリックしたら該当のスライドに遷移する。 pagination用に用意した要素にクラス『swiper-pagination-clickable』が付与される。
clickableClass	'swiper-pagination-clickable'	typeが’bullets’かつclickableがtrueのときに有効なパラメータで、ドットのclass名を指定。
currentClass	'swiper-pagination-current'	typeが’fraction’のときに有効なパラメータで、表示中のスライドに対応している数字を表示する要素にclass名を指定。
dynamicBullets	false	typeが’bullets’のときに有効なパラメータで、スライド数が多い場合ドットを省略出来る。ドットは表示中のスライドは大サイズ、その両サイドは中サイズ、更に1つ外側は小サイズ、それ以外は省略される。
dynamicMainBullets	1	typeが’bullets’かつdynamicBulletsが trueのときに有効なパラメータ。大サイズで表示するドットの数を指定。
el	null	paginationで使う要素のclass名を指定。『swiper-pagination』にすると、デフォルトのスタイルが使える。これを設定しないとページネーションは表示されない。
enabled	なし	特定のブレイクポイントでページ送りを有効/無効にするためにブレイクポイントで使用するブール値プロパティ。
formatFractionCurrent	なし	format fraction pagination 現在の番号。関数は現在の番号を受け取り、フォーマットされた値を返す必要がある。
formatFractionTotal	なし	フォーマットされた分数ページネーション合計数。関数は総数を受け取り、フォーマットされた値を返す必要がある。
hiddenClass	'swiper-pagination-hidden'	ページ送りが非アクティブになったときの class名を指定。
hideOnClick	true	スライダーのコンテナをクリックすると、ページネーションコンテナの表示/非表示を切り替えることができる。
horizontalClass	'swiper-pagination-horizontal'	水平方向のSwiperでページネーションに設定されるclass名を指定。
lockClass	'swiper-pagination-lock'	ページングが無効な場合に設定されるclass名を指定。
modifierClass	'swiper-pagination-'	パラメータによってページネーションに追加されるモディファイアのclass名を指定。
paginationDisabledClass	'swiper-pagination-disabled'	ブレークポイントによりページネーションが無効化されている場合、swiper container およびページネーション要素にclass名を指定。
progressbarFillClass	'swiper-pagination-progressbar-fill'	ページネーションプログレスバーの塗りつぶし要素のclass名を指定。
progressbarOpposite	false	typeが’progressbar’のときに有効なパラメータで、プログレスバーをスライダーが動く方向とは逆方向に動くようにする。
progressbarOppositeClass	'swiper-pagination-progressbar-opposite'	typeが’progressbar’のときに有効なパラメータで、プログレスバー全体になる要素のclass名を指定。
renderBullet	なし	typeが’bullets’のときに有効なパラメータで、ページネーション用の箇条書きを完全にカスタマイズするためのもの。
renderCustom	なし	typeが’custom’のときに有効なパラメータで、レンダリング方法を指定する必要がある。
renderFraction	なし	typeが’fraction’のときに有効なパラメータで、 pagination html をカスタマイズできる。
renderProgressbar	なし	typeが’progress’のときに有効なパラメータで、 progressのページ処理をカスタマイズできる。
totalClass	'swiper-pagination-total'	typeが’fraction’のときに有効なパラメータで、スライドの総数を表示する要素のclass名を指定。
type	'bullets'	ページネーションのタイプを指定するパラメータ。 ‘bullets’→ドットインジケーター ‘fraction’→スライド数表示 ‘progressbar’→プログレスバー ‘custom’は自分で作るタイプで何も表示されない。
verticalClass	'swiper-pagination-vertical'	垂直方向のSwiperでページネーションに設定されたclass名を指定。

scrollbar（スクロールバーのオプション）

オプション名	初期値	内容
dragClass	'swiper-scrollbar-drag'	スクロールバー・操作できる要素の class名を指定。
dragSize	'auto'	スクロールバーのドラッグ可能な要素のサイズ（単位：px）
draggable	false	trueにするとスクロールバーの操作が可能。
el	null	scrollbarを使う要素を指定。これを設定しないとスクロールバーは表示されない。
enabled	なし	特定のブレイクポイントでスクロールバーを有効/無効にするためにブレイクポイントで使用するブール値プロパティ。
hide	true	ユーザー操作の後に自動的にスクロールバーを非表示。
horizontalClass	'swiper-scrollbar-horizontal'	水平方向のSwiperでスクロールバーに設定されるclass名を指定。
lockClass	'swiper-scrollbar-lock'	スクロールバー要素無効時のclass名を指定。
scrollbarDisabledClass	'swiper-scrollbar-disabled'	ブレークポイントによりスクロールバーが無効化された場合、swiper containerとスクロールバー要素にclass名を指定。
snapOnRelease	false	trueにするとスクロールバーを離したときにスライダーの位置がスライドにスナップする。
verticalClass	'swiper-scrollbar-vertical'	垂直方向のSwiperでスクロールバーに設定されるclass名を指定。

個人的にはスクロールバーは基本的に使いません。

autoplay（自動再生のオプション）

オプション名	初期値	内容
delay	3000	自動再生時のスライド間の時間
disableOnInteraction	true	ユーザーがスライダーを操作したときに、自動再生を止める。（矢印のクリック・スワイプ・ドラッグなど）
pauseOnMouseEnter	false	自動再生時にカーソルを乗せると、自動再生が一時停止。
reverseDirection	false	自動再生の方向を逆方向にする。
stopOnLastSlide	false	最後のスライドで自動再生が停止する。（ループ時は無効）
waitForTransition	true	自動再生時にswiper-wrapperのトランジションが継続するのを待つ設定。

freeMode

これを有効にして勢いよくスワイプやドラッグすると、前後のスライドで止まらずに何枚もスライドする。

あまり使う機会はないと思います。

オプション名	初期値	内容
enabled	false	trueにするとfreeModeが有効になる。
minimumVelocity	0.02	freeModeの発動に必要な最小タッチムーブ速度。
momentum	true	trueの場合、スライドを離してもしばらく動き続ける。
momentumBounce	true	falseにすると、フリーモードでモメンタムバウンスが無効になる。
momentumBounceRatio	1	値を大きくすると、モメンタムバウンス効果が大きくなる。
momentumRatio	1	値を大きくすると、スライダーを離した後の運動量が大きくなる。
momentumVelocityRatio	1	値を大きくすると、スライダーを離した後の運動速度が大きくなる。
sticky	false	Enabledに設定すると、フリーモード時にスライド位置へのスナップが可能になる。

grid

これは上下複数行のグリッドスライダーを作る際に使います。

オプション名	初期値	内容
fill	'column'	'column' または 'row' を指定可能。スライド列または行のどちらにするか決められる。
rows	1	複数行レイアウトの場合のスライド行数。

あわせて読みたい

: 【Swiper】上下複数行のグリッドスライダーの作り方
続きを見る

parallax（パララックスのオプション）

オプション名	初期値	内容
enabled	false	trueにするとパララックスが有効になる。

あわせて読みたい

: 【Swiper】パララックススライダーを作る方法【サンプル付き】
続きを見る

エフェクトのオプション

エフェクトのオプションはエフェクトの種類ごとにあります。

fadeEffect

オプション名	初期値	内容
crossFade	false	trueにするとスライドクロスフェードが有効になる。

これはデフォルトだとサイズがバラバラのスライドの場合、スライドが切り替わっても前のスライドが残ってしまいます（パソコンの場合は左上のHTML・CSS・JSをクリックすると見やすいです）

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

以下のようにcrossFade: trueにすればちゃんと残らず切り替わります。

const swiper = new Swiper('.swiper', {
  effect: 'fade',
  fadeEffect: {
    crossFade: true
  },
});

coverflowEffect

オプション名	初期値	内容
depth	100	奥行きオフセット（px）（スライドはZ軸方向に移動する）
modifier	1	エフェクトの倍率
rotate	50	スライド回転角度
scale	1	スライドの拡大率
slideShadows	true	スライドシャドウを有効にする
stretch	0	スライド間の伸縮スペース（px）

flipEffect

オプション名	初期値	内容
limitRotation	true	エッジスライドの回転を制限する
slideShadows	true	スライドシャドウを有効にする

cubeEffect

オプション名	初期値	内容
shadow	true	メインスライダーのシャドウを有効にする
shadowOffset	20	メインシャドウのオフセット（px）
shadowScale	0.94	メインシャドウの拡大率
slideShadows	true	スライドシャドウを有効にする

cardsEffect

オプション名	初期値	内容
perSlideOffset	8	スライドごとのオフセット距離（px）
perSlideRotate	2	スライドごとの回転角度
rotate	true	カードの回転を可能にする
slideShadows	true	スライドシャドウを有効にする

creativeEffect

オプション名	初期値	内容
limitProgress	1	進行/オフセットをサイドスライドの量に制限する。 1 の場合 prev/next の後にあるすべてのスライドが同じ状態になる。 2 の場合 2 番目の前/後アクティブの後のすべてのスライドが同じ状態になる。
next	なし	次のスライドの変形。
perspective	true	カスタム変換で3D変換（translateZ, rotateX, rotateY）が必要な場合、このパラメータを有効にする。
prev	なし	前のスライドの変形。
progressMultiplier	1	スライドの変形と不透明度の乗算を可能にする。
shadowPerProgress	false	スライドごとにシャドウの不透明度を分割する。

thumbs（サムネイルのオプション）

オプション名	初期値	内容
autoScrollOffset	0	アクティブなスライドを端からどのサムネイルまで自動的にスクロールさせるかを設定できる。
multipleActiveThumbs	true	trueにすると複数のサムネイルスライドがアクティブになる場合がある。
slideThumbActiveClass	'swiper-slide-thumb-active'	起動したサムネイルのclass名を指定。
swiper	null	サムネイルを実装するのに必要
thumbsContainerClass	'swiper-thumbs'	thumbs swiperのclass名を指定。

オプションのswiperの書き方については以下の記事を参照下さい。

あわせて読みたい

: 【Swiper】サムネイルクリックで画像が切り替わるスライダーの作り方
続きを見る

keyboard（キーボード操作のオプション）

オプション名	初期値	内容
enabled	false	キーボード制御を有効にする場合はtrueにする。
onlyInViewport	true	trueにすると現在ビューポートにあるスライダーを制御する。
pageUpDown	true	trueにすると Page UpおよびPage Downキーによるキーボード操作が可能になる。

有効にするとキーボードの ← → キーでスライドを操作できるようになります。

mousewheel（マウスホイール操作のオプション）

オプション名	初期値	内容
eventsTarget	'container'	マウスホイール・イベントを受け付けるコンテナの CSS セレクタまたは HTML 要素を指定する文字列。
forceToAxis	false	trueにするとマウスホイールのスワイプを強制的に軸にする。水平モードではマウスホイールの水平スクロールのみ、垂直モードでは垂直スクロールのみ動作するようになる。
invert	false	trueにするとスライド方向が逆になる。
releaseOnEdges	false	trueにするとスワイプが端の位置 (先頭または末尾) にある場合に、マウスホイールのイベントを解除してページのスクロールを許可する。
sensitivity	1	マウスホイールデータの乗算器、マウスホイールの感度を調整できる。
thresholdDelta	null	スウィーパーのスライドを変更するための最小マウスホイール・スクロール・デルタ数。
thresholdTime	null	スイパースライドの変更をトリガするための最小マウスホイールスクロール時間差（ms）