jQuery不要でスライダーを簡単に実装できるプラグインとして有名なSwiperですが、オプションが色々あり、かなり幅広くカスタマイズ可能です。
そこで今回は、Swiperのオプションをまとめてご紹介します。
Swiperの基本的な使い方については、こちらの記事を参照下さい。
【2024年最新Ver11】Swiperの使い方とよく使うオプション・カスタマイズ方法を解説
続きを見る
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
(有料になっていたらすいません🙇♂️)
Swiperのカスタマイズ用オプションまとめ一覧
早速ですが、Swiperのオプションの一覧をご紹介します。
個人的に良く使う物は赤字、特に良く使う物は太字にしています。
オプション内容については主に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にすると巻き戻しモードが有効になる。 有効にすると最後のスライドにいるときに 最初のスライドにいるときに |
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】サムネイルクリックで画像が切り替わるスライダーの作り方
続きを見る
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) |
Swiperのカスタマイズ用オプションの解説
使用頻度が高いオプションの補足をします。
navigation(nextEl・prevEl)
これは、前へ次へのスライドに切り替える矢印を表示するためのオプションで、これがないと表示されません。
これを使えば、前へ次への矢印をCSSや画像にカスタマイズすることも可能です。
【Swiper】前へ次への矢印をカスタマイズする方法(画像変更あり)
続きを見る
pagination(el・clickable)
これは、ドットインジケーターを表示するためのオプションで、"ei"がないと表示されません。
clickable
は、ドットクリックすると該当のスライドに切り替わるようにするオプションです。
ドットインジケーター(ページネーション)をカスタマイズすることも可能です。
【Swiper】スライダーのページネーション(ドット)をカスタマイズする方法
続きを見る
pagination(type: "fraction")
ドットインジケーターのデフォルトは『ドット』ですが、function
にするとスライドの総数と現在のスライドが何番目かを表示できます。
【Swiper】スライドの総数と現在のスライドが何番目か表示させる方法
続きを見る
autoplay(delay)
これは自動再生時のスライド間の時間で、デフォルトは3000ミリ秒ですが、0にすると常に流れ続ける無限ループスライダーが作れます。
【Swiper】横方向に流れ続ける無限ループスライダーを作る方法
続きを見る
breakpoints
これは設定したブレイクポイント以下で、スライドの表示数を減らしたりするときに使います。
ブレイクポイントを設定してレスポンシブ対応のスライダーが作れます。
設定出来るのはスライドの枚数だけでなく、他のオプションも設定可能です。
【Swiper】ブレイクポイントを設定してレスポンシブ対応のスライダーを作る方法
続きを見る
effect
これは、スライドの切り替わり方を指定するオプションです。
Swiperのエフェクトのデフォルトは『スライド』ですが、次によく使うのは『フェード』かと思います。
【Swiper】スライダーのエフェクトまとめ
続きを見る
disableOnInteraction
これは、矢印をクリック・ドラッグ・スワイプをすると、自動再生を止めるかどうかを設定するオプションです。
デフォルトだと自動再生にしていても、次への矢印などをクリックしたら自動再生は止まります。
【Swiper】クリック・スワイプ・ドラッグでスライダーの自動再生を止めずに継続させる方法
続きを見る
autoHeight
これは、スライドの高さがバラバラの時に自動で高さを調整するオプションです。
デフォルトでは次へ前への矢印の位置が、一番高いスライドの上下中央に固定されてしまいます。
そこで、高さが違う全てのスライドの上下中央に矢印を配置したい場合に、有効にします。
ただし、下のコンテンツも上下に動いて違和感がありまくりなので、使う際には注意しましょう。
【Swiper】高さがバラバラのスライドで高さを自動調整する方法
続きを見る
まとめ:オプションはよく使うものだけ使えればOK
今回は、Web制作のコーディングで欠かせないスライダー、Swiperのオプションをご紹介しました。
大量にありましたが、全てを理解する必要はないと思うので、よく使う物から使えるようになっていけばOKです。
以上になります。
関連記事slick記事一覧
関連記事Swiper記事一覧
関連記事Splide記事一覧