Swiper Web制作 スライダー

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

2022年12月12日

※ 当サイトではアフィリエイト広告を利用しています

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

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

そこで今回は、Swiperのオプションをまとめてご紹介します。

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

あわせて読みたい
【jQuery不要】スライダープラグイン Swiper.jsの使い方
【2024年最新Ver11】Swiperの使い方とよく使うオプション・カスタマイズ方法を解説

続きを見る

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 完全無料
  • 30日間でWeb制作を学べる
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 毎日人数制限ありの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
(有料になっていたらすいません🙇‍♂️)

\ 完全無料 /

ZeroPlus Gate公式サイト

毎日先着制!

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

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

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

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

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

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

 

基本のオプション

オプション名初期値内容
allowSlideNexttruefalseにすると次のスライド方向(右または下)への
スワイプを無効。
allowSlidePrevtruefalseにすると前のスライド方向(左または上)への
スワイプを無効。
allowTouchMovetrueスワイプを可能にするかどうか。
falseだとナビゲーションやslideNext()等でしか
スライドできなくなる。
autoHeightfalsetrueにすると.swiper-wrapperの高さが
アクティブなスライドの高さになる。
スライドの高さがバラバラの場合、
スライドするたびに次のスライドの高さに自動で変わる。
breakpointsなしレスポンシブ対応のためにブレークポイントごとに
異なるパラメータを設定できる。
breakpointsBase'window''window'または'container'を指定
'window'→ブレークポイントはwindowの幅
'container'→ブレークポイントはSwiperのコンテナ幅
centerInsufficientSlidesfalsetrueにするとslidesPerViewで設定した数値より
スライド数が少ない時、スライドが中央に配置される。
centeredSlidesfalsetrueにするとアクティブなスライドは
左側ではなく中央になる。
centeredSlidesBoundsfalsetrueにするとアクティブなスライドはスライダーの
最初と最後に余白がなくなり、中央に配置される。
trueにするとloopとpaginationは使用不可。
createElementsfalseSwiperが有効な場合、自動的にスライドを
swiper-wrapper要素でラップし、
『navigation』『pagination』『scrollbar』に必要な要素を
作成するかどうかを指定する。
cssModefalsetrueにすると、最新のCSS Scroll Snap APIが使用される。
Swiperの全機能をサポートしているわけではない。
direction'horizontal'スライドの動き方を水平方向('horizontal')か
垂直方向('vertical')のどちらか選択。
edgeSwipeDetectionfalseスワイプで戻る操作をできなくするかを指定する。
edgeSwipeThreshold20スワイプで戻る操作をできなくする範囲を
数値のみ(pxが単位になる)指定する。
effect'slide'スライドのエフェクトを指定'slide'以外には
'fade', 'cube', 'coverflow', 'flip', 'creative'がある。
enabledtrueSwiperが初期状態で有効かを指定する。
falseにすると操作を受け付けなくなる。
focusableElementsinput
select
option
textarea
button
video
label
フォーカス可能な要素用の CSS セレクタ。
そのような要素がフォーカスされている場合、
スワイプは無効になる。
followFingertruefalseにするとスワイプしている手を
外したタイミングで動作する。
grabCursorfalsetrueにするとSwiperにカーソルを置いたときに
指のカーソルが表示される。
heightnullSwiperの高さを強制的に変更するためのパラメータ。
inittrueインスタンス作成時にSwiperを
自動的に初期化するかどうかを指定。
falseの場合は手動でswiper.init()を
呼び出して初期化する必要がある。
initialSlide0最初のスライドのインデックス番号。
injectStylesなしSwiper Element での使用のみ、
shadow DOMにテキストスタイルを注入する。
injectStylesUrlsなしSwiper Element での使用のみ、
シャドウDOMにスタイル<link>を注入する。
longSwipestrue長いスワイプを無効にしたい場合はfalseにする。
longSwipesMs300長いスワイプの際に次の/前のスライドに
スワイプするまでの最小時間。
longSwipesRatio0.5長いスワイプの際に次の/前のスライドへの
スワイプを誘発する割合。
loopfalseループさせる場合はtrueにする。
loopPreventsSlidingtruetrueにするとスライダーがループモードで
アニメーションしている間、slideNext/Prevは何もしない。
loopedSlidesnull終了/開始前に何枚のスライドを
並べ替えるか(ループ)を定義する。
指定しない場合、デフォルトはslidesPerView。
maxBackfaceHiddenSlides10スライドの合計数がここで指定した値より少ない場合、
Swiperはスライド要素のbackface-visibility: hiddenを
有効にして、Safariの視覚的なフリッカーを低減する。
nestedfalsetrueにするとタッチイベントを正しく受信できる。
親と同じ方向を使用するSwipersにのみ使用する。
noSwipingtruenoSwipingClassで指定されたクラスにマッチする
要素に対してスワイプを行うか否かを指定する。
noSwipingSelectorなしnoSwipingClassの代わりにスワイプを
無効にする要素を指定するために使用可能。
例えば 'input' は全ての入力に対して
スワイプを無効化する。
normalizeSlideIndextrueスライドインデックスをノーマライズする。
observeParentsfalseSwiperの親要素のMutationsも監視する
必要がある場合はtrueにする。
observeSlideChildrenfalseSwiperスライドの子要素のMutationsも
監視する必要がある場合はtrueにする。
observerfalseSwiperとその要素でMutation Observerを
有効にするには、trueにする。
この場合Swiperのスタイルを変更したり(hide/showなど)、
子要素を修正したり(スライドの追加/削除など)すると、
その都度Swiperが更新(再初期化)される。
onなしイベントハンドラの登録。
oneWayMovementfalseこの機能を有効にすると、スワイプの方向に関係なく
スライドを前方にのみ移動させる(一方通行)。
passiveListenerstrueモバイルデバイスでのスクロールのパフォーマンスを向上させるため、
可能な限りデフォルトでパッシブイベントリスナーが使用される。
しかし、e.preventDefaultを使用する必要があり、
それと衝突する場合このパラメータを無効にする必要がある。
preventClickstruetrueにするとスワイプ中に誤ってリンクを
クリックしないようになる。
preventClicksPropagationtruetrueにするとスワイプ中のリンクに対する
clicksイベントの伝播を停止する。
preventInteractionOnTransitionfalsetrueにすると遷移中にスワイプやナビゲーション、
ページングボタンでスライドを変更できなくなる。
resistancetrueレジスタントバウンズを無効にしたい場合はfalseにする。
resistanceRatio0.85抵抗比を制御することができる。
resizeObservertruetrueにするとSwiperコンテナーでResizeObserver
(ブラウザでサポートされている場合)を使用して、
コンテナのリサイズを検出する。
rewindfalsetrueにすると巻き戻しモードが有効になる。

有効にすると最後のスライドにいるときに
"next" ナビゲーションボタンをクリックする
(または .slideNext() を呼び出す) と、
最初のスライドに戻るようにスライドする。

最初のスライドにいるときに
"prev" ナビゲーションボタンをクリックする
(または .slidePrev() を呼び出す) と、
最後のスライドにスライドフォワードされる。

roundLengthsfalsetrueにするとスライドの幅と高さの値を丸め、通常の解像度
のスクリーンでテキストがぼやけないようにする。
runCallbacksOnInittrueSwiperの初期化時にTransition/SlideChange/Start/
Endイベントを発生する。
initialSlideが0でない場合やloopモードを使用している場合、
これらのイベントが初期化時に発生する。
setWrapperSizefalsetrueにするとプラグインはすべてのスライドの合計サイズと
等しいSwiperラッパーの幅/高さを設定する。
shortSwipestrue短いスワイプを無効にしたい場合はfalseにする。
simulateTouchtruetrueにするとSwiperはタッチイベントのような
マウスイベントを受け付ける。
(クリック&ドラッグでスライドを変更)
slideToClickedSlidefalsetrueにして任意のスライドをクリックすると、
このスライドに遷移する。
slidesOffsetAfter0コンテナの最後(全スライドの後)に追加の
スライドオフセットを(pxで)追加する。
slidesOffsetBefore0コンテナの最初(全スライドの前)に追加の
スライドオフセットを(pxで)追加する。
slidesPerGroup1グループスライドを定義し、有効にするための
スライド数を設定する。
slidesPerView > 1で使用すると便利。
slidesPerGroupAutofalseこのパラメータは、slidesPerView::auto と共に
使用することを意図しています。
'auto' と slidesPerGroup: 1. 有効にすると、ビュー内のすべての
スライドを .slideNext() & .slidePrev() メソッド呼び出し時、
ナビゲーション "ボタン" クリック時、
および自動再生時にスキップするようになります。
slidesPerGroupSkip0slidesPerGroupSkip が 0 の場合、
グループ化から除外されるスライドはなく、
結果の動作はこの変更を行わない場合と同じになる。
slidesPerGroupSkip が 1 以上の場合、
最初の X 枚のスライドは単一のグループとして扱われ、
それ以降のスライドはすべて slidesPerGroup の値で
グループ化されます。
slidesPerView11ビューあたりのスライド数。
(スライダーのコンテナ上で同時に表示されるスライド数)
spaceBetween0スライド間の距離(単位:px)
speed300スライド間の遷移時間(単位:ms)
swipeHandlernullスワイプ時にのみ利用可能なハンドラとして機能する
ページネーション付きコンテナの CSS セレクタ
または HTML 要素を含む文字列。
threshold5pxで指定する閾値。
タッチ距離 "がこの値より小さい場合、スワイプは動かない。
touchAngle45タッチムーブのトリガーとなる許容角度(単位:度)
touchEventsTarget'wrapper'タッチイベントを待機させる対象要素。
'container':swiperのタッチイベントを監視する
'wrapper':swiper-wrapperのタッチイベントを監視する
touchMoveStopPropagationfalsetrueにすると "touchmove " の伝搬を停止する。
touchRatio1タッチ比率
touchReleaseOnEdgesfalseスライダーのエッジ位置(開始、終了)でタッチイベントを解除し、
さらにページスクロールができるようにする。
touchStartForcePreventDefaultfalseタッチスタート(ポインタダウン)イベントの
デフォルトを常に防止するよう強制する。
touchStartPreventDefaulttruefalseにすると、ポインタダウンイベントは防止されない
uniqueNavElementstruetrueにするとナビゲーション要素のパラメータが
文字列として渡されると(「.pagination」のように)、
Swiperはまず子要素からそのような要素を探す。
pagination、prev/nextボタン、scrollbar要素に適用される。
updateOnWindowResizetrueウィンドウサイズ変更時に
スライド位置の再計算を行うようにする。
urlnullサーバーサイドでレンダリングされ、履歴が有効な場合に、
アクティブなスライド検出のために必要。
userAgentnulluserAgent 文字列。
サーバーサイドでレンダリングする際に、
ブラウザ/デバイスの検出に必要。
virtualTranslatefalsetrueにするとSwiperが移動しない以外は通常通り動作し、
ラッパーの実際の平行移動の値も設定されなくなる。
カスタムスライドを作成する際に便利。
watchOverflowtrueSwiperを有効にすると、スライドに十分なスライドがない場合に、
ナビゲーションボタンを非表示にすることができる。
watchSlidesProgressfalsetrueにすると各スライドの進行状況と可視性が計算される。
(ビューポート内のスライドには、追加の可視クラスが表示される)
widthnullSwiperの幅(単位: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名を指定。
hideOnClickfalseスライダーのコンテナをクリックしたら
ナビゲーションボタンの表示・非表示切替。
lockClass'swiper-button-lock'ナビゲーションボタンが無効の場合、
class名を指定。
navigationDisabledClass'swiper-navigation-disabled'ブレークポイントによりナビゲーションが
無効化された場合、swiper containerに
class名を指定。
nextElnull次のスライドへ切り替えるボタンのclass名を指定。
『swiper-button-next』にすると、
デフォルトのスタイルが使える。
これを設定しないと矢印は表示されない。
prevElnull前のスライドへ切り替えるボタンのclass名を指定。
『swiper-button-prev』にすると、
デフォルトのスタイルが使える。
これを設定しないと矢印は表示されない。

 

pagination(ドットインジケーターのオプション)

オプション名初期値内容
bulletActiveClass'swiper-pagination-bullet-active'typeが’bullets’のときに有効なパラメータで、
表示中のスライドに対応したドットのclass名を指定。
bulletClass'swiper-pagination-bullet'typeが’bullets’のときに有効なパラメータで、
ドットのclass名を指定。
bulletElement'span'typeが’bullets’のときに有効なパラメータで、
ドットを作る要素を指定。
clickablefalsetypeが’bullets’のときに有効なパラメータで、
ドットをクリックしたら該当のスライドに遷移する。
pagination用に用意した要素にクラス
『swiper-pagination-clickable』が付与される。
clickableClass'swiper-pagination-clickable'typeが’bullets’かつclickableがtrueのときに
有効なパラメータ
で、ドットのclass名を指定。
currentClass'swiper-pagination-current'typeが’fraction’のときに有効なパラメータで、
表示中のスライドに対応している
数字を表示する要素にclass名を指定。
dynamicBulletsfalsetypeが’bullets’のときに有効なパラメータで、
スライド数が多い場合ドットを省略出来る。
ドットは表示中のスライドは大サイズ、
その両サイドは中サイズ、
更に1つ外側は小サイズ、
それ以外は省略される。
dynamicMainBullets1typeが’bullets’かつdynamicBulletsが
trueのときに有効なパラメータ。
大サイズで表示するドットの数を指定。
elnullpaginationで使う要素のclass名を指定。
『swiper-pagination』にすると、
デフォルトのスタイルが使える。
これを設定しないとページネーションは表示されない。
enabledなし特定のブレイクポイントでページ送りを
有効/無効にするためにブレイクポイントで
使用するブール値プロパティ。
formatFractionCurrentなしformat fraction pagination 現在の番号。
関数は現在の番号を受け取り、
フォーマットされた値を返す必要がある。
formatFractionTotalなしフォーマットされた分数ページネーション合計数。
関数は総数を受け取り、
フォーマットされた値を返す必要がある。
hiddenClass'swiper-pagination-hidden'ページ送りが非アクティブになったときの
class名を指定。
hideOnClicktrueスライダーのコンテナをクリックすると、
ページネーションコンテナの表示/非表示を
切り替えることができる。
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名を指定。
progressbarOppositefalsetypeが’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)
draggablefalsetrueにするとスクロールバーの操作が可能。
elnullscrollbarを使う要素を指定。
これを設定しないとスクロールバーは表示されない。
enabledなし特定のブレイクポイントでスクロールバーを
有効/無効にするためにブレイクポイントで
使用するブール値プロパティ。
hidetrueユーザー操作の後に自動的に
スクロールバーを非表示。
horizontalClass'swiper-scrollbar-horizontal'水平方向のSwiperでスクロールバーに
設定されるclass名を指定。
lockClass'swiper-scrollbar-lock'スクロールバー要素無効時のclass名を指定。
scrollbarDisabledClass'swiper-scrollbar-disabled'ブレークポイントによりスクロールバーが
無効化された場合、swiper containerと
スクロールバー要素にclass名を指定。
snapOnReleasefalsetrueにするとスクロールバーを離したときに
スライダーの位置がスライドにスナップする。
verticalClass'swiper-scrollbar-vertical'垂直方向のSwiperでスクロールバーに
設定されるclass名を指定。

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

 

autoplay(自動再生のオプション)

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

 

freeMode

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

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

オプション名初期値内容
enabledfalsetrueにするとfreeModeが有効になる。
minimumVelocity0.02freeModeの発動に必要な
最小タッチムーブ速度。
momentumtruetrueの場合、スライドを離しても
しばらく動き続ける。
momentumBouncetruefalseにすると、フリーモードで
モメンタムバウンスが無効になる。
momentumBounceRatio1値を大きくすると、
モメンタムバウンス効果が大きくなる。
momentumRatio1値を大きくすると、
スライダーを離した後の運動量が大きくなる。
momentumVelocityRatio1値を大きくすると、
スライダーを離した後の運動速度が大きくなる。
stickyfalseEnabledに設定すると、フリーモード時に
スライド位置へのスナップが可能になる。

 

grid

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

オプション名初期値内容
fill'column''column' または 'row' を指定可能。
スライド列または行のどちらにするか決められる。
rows1複数行レイアウトの場合のスライド行数。
あわせて読みたい
【Swiper】上下複数行のグリッドスライダーの作り方
【Swiper】上下複数行のグリッドスライダーの作り方

続きを見る

 

parallax(パララックスのオプション)

オプション名初期値内容
enabledfalsetrueにするとパララックスが有効になる。
あわせて読みたい
【Swiper】パララックススライダーを作る方法【サンプル付き】
【Swiper】パララックススライダーを作る方法【サンプル付き】

続きを見る

 

エフェクトのオプション

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

 

fadeEffect

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

これはデフォルトだとサイズがバラバラのスライドの場合、スライドが切り替わっても前のスライドが残ってしまいます(パソコンの場合は左上の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

オプション名初期値内容
depth100奥行きオフセット(px)
(スライドはZ軸方向に移動する)
modifier1エフェクトの倍率
rotate50スライド回転角度
scale1スライドの拡大率
slideShadowstrueスライドシャドウを有効にする
stretch0スライド間の伸縮スペース(px)

 

flipEffect

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

 

cubeEffect

オプション名初期値内容
shadowtrueメインスライダーのシャドウを有効にする
shadowOffset20メインシャドウのオフセット(px)
shadowScale0.94メインシャドウの拡大率
slideShadowstrueスライドシャドウを有効にする

 

cardsEffect

オプション名初期値内容
perSlideOffset8スライドごとのオフセット距離(px)
perSlideRotate2スライドごとの回転角度
rotatetrueカードの回転を可能にする
slideShadowstrueスライドシャドウを有効にする

 

creativeEffect

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

 

thumbs(サムネイルのオプション)

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

サムネイルのオプションの書き方については、以下の記事を参照下さい。

あわせて読みたい
【Swiper】サムネイルクリックで画像が切り替わるスライダーの作り方
【Swiper】サムネイルクリックで画像が切り替わるスライダーの作り方

続きを見る

 

keyboard(キーボード操作のオプション)

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

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

 

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

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

Swiperのカスタマイズ用オプションの解説

使用頻度が高いオプションの補足をします。

 

navigation(nextEl・prevEl)

これは、前へ次へのスライドに切り替える矢印を表示するためのオプションで、これがないと表示されません。

これを使えば、前へ次への矢印をCSSや画像にカスタマイズすることも可能です。

あわせて読みたい
【Swiper】前へ次への矢印をカスタマイズする方法(画像変更も紹介)
【Swiper】前へ次への矢印をカスタマイズする方法(画像変更あり)

続きを見る

 

pagination(el・clickable)

これは、ドットインジケーターを表示するためのオプションで、"ei"がないと表示されません。

clickableは、ドットクリックすると該当のスライドに切り替わるようにするオプションです。

ドットインジケーター(ページネーション)をカスタマイズすることも可能です。

あわせて読みたい
【Swiper】スライダーのページネーション(ドット)をカスタマイズする方法
【Swiper】スライダーのページネーション(ドット)をカスタマイズする方法

続きを見る

 

pagination(type: "fraction")

ドットインジケーターのデフォルトは『ドット』ですが、functionにするとスライドの総数と現在のスライドが何番目かを表示できます。

あわせて読みたい
【Swiper】スライドの総数と現在のスライドが何番目か表示させる方法
【Swiper】スライドの総数と現在のスライドが何番目か表示させる方法

続きを見る

 

autoplay(delay)

これは自動再生時のスライド間の時間で、デフォルトは3000ミリ秒ですが、0にすると常に流れ続ける無限ループスライダーが作れます。

あわせて読みたい
【Swiper】横方向に流れ続ける無限ループスライダーを作る方法
【Swiper】横方向に流れ続ける無限ループスライダーを作る方法

続きを見る

 

breakpoints

これは設定したブレイクポイント以下で、スライドの表示数を減らしたりするときに使います。

ブレイクポイントを設定してレスポンシブ対応のスライダーが作れます。

設定出来るのはスライドの枚数だけでなく、他のオプションも設定可能です。

あわせて読みたい
【Swiper】ブレイクポイントを設定してレスポンシブ対応のスライダーを作る方法
【Swiper】ブレイクポイントを設定してレスポンシブ対応のスライダーを作る方法

続きを見る

 

effect

これは、スライドの切り替わり方を指定するオプションです。

Swiperのエフェクトのデフォルトは『スライド』ですが、次によく使うのは『フェード』かと思います。

あわせて読みたい
【Swiper】スライダーのエフェクトまとめ
【Swiper】スライダーのエフェクトまとめ

続きを見る

 

disableOnInteraction

これは、矢印をクリック・ドラッグ・スワイプをすると、自動再生を止めるかどうかを設定するオプションです。

デフォルトだと自動再生にしていても、次への矢印などをクリックしたら自動再生は止まります。

あわせて読みたい
【Swiper】クリック・スワイプ・ドラッグでスライダーの自動再生を止めずに継続させる方法
【Swiper】クリック・スワイプ・ドラッグでスライダーの自動再生を止めずに継続させる方法

続きを見る

 

autoHeight

これは、スライドの高さがバラバラの時に自動で高さを調整するオプションです。

デフォルトでは次へ前への矢印の位置が、一番高いスライドの上下中央に固定されてしまいます。

そこで、高さが違う全てのスライドの上下中央に矢印を配置したい場合に、有効にします。

ただし、下のコンテンツも上下に動いて違和感がありまくりなので、使う際には注意しましょう。

あわせて読みたい
【Swiper】高さがバラバラのスライドで高さを自動調整する方法
【Swiper】高さがバラバラのスライドで高さを自動調整する方法

続きを見る



まとめ:オプションはよく使うものだけ使えればOK

今回は、Web制作コーディングで欠かせないスライダー、Swiperのオプションをご紹介しました。

大量にありましたが、全てを理解する必要はないと思うので、よく使う物から使えるようになっていけばOKです。

以上になります。

関連記事slick記事一覧
関連記事Swiper記事一覧
関連記事Splide記事一覧

この記事が役に立ったと思ったら、シェアボタンからX(旧Twitter)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!
  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X(旧Twitter)フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-Swiper, Web制作, スライダー