Swiper API

a11y パラメータを持つオブジェクト、またはデフォルト設定で有効にする場合はブール値 true。

const swiper = new Swiper('.swiper', {
  a11y: {
    prevSlideMessage: 'Previous slide',
    nextSlideMessage: 'Next slide',
  },
});

次のスライド方向 (右または下) へのスワイプを無効にするには false に設定します

前のスライド方向 (左または上) へのスワイプを無効にするには false に設定します

false の場合、スライドを切り替える唯一の方法は、slidePrev や slideNext などの外部 API 関数を使用することです

true に設定すると、スライダーラッパーは、現在アクティブなスライドの高さに合わせて高さを調整します

自動再生パラメータを持つオブジェクト、またはデフォルト設定で有効にする場合はブール値 true

const swiper = new Swiper('.swiper', {
 autoplay: {
   delay: 5000,
 },
});

異なるレスポンシブブレークポイント（画面サイズ）に対して異なるパラメータを設定できます。すべてのパラメータがブレークポイントで変更できるわけではなく、slidesPerView、slidesPerGroup、spaceBetween、grid.rowsなど、異なるレイアウトやロジックを必要としないもののみです。loop や effect のようなパラメータは機能しません

const swiper = new Swiper('.swiper', {
  // Default parameters
  slidesPerView: 1,
  spaceBetween: 10,
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
})

const swiper = new Swiper('.swiper', {
  slidesPerView: 1,
  spaceBetween: 10,
  // using "ratio" endpoints
  breakpoints: {
    '@0.75': {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    '@1.00': {
      slidesPerView: 3,
      spaceBetween: 40,
    },
    '@1.50': {
      slidesPerView: 4,
      spaceBetween: 50,
    },
  }
});

ブレークポイントのベース (ベータ版)。window または container にすることができます。window (デフォルト) に設定した場合、ブレークポイントキーはウィンドウ幅を意味します。container に設定した場合、ブレークポイントキーは swiper コンテナの幅として扱われます

Cards-effect パラメータを持つオブジェクト

const swiper = new Swiper('.swiper', {
  effect: 'cards',
  cardsEffect: {
    // ...
  },
});

有効にすると、スライドの量が slidesPerView よりも少ない場合にスライドを中央に配置します。loop モードと grid.rows で使用することを意図していません

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

true の場合、アクティブなスライドは、スライダーの先頭と末尾にギャップを追加せずに中央に配置されます。centeredSlides: true が必要です。loop または pagination とともに使用することを意図していません

さまざまなパラメータに応じて swiper コンテナに追加できるモディファイア CSS クラスの先頭

コントローラパラメータを持つオブジェクト、またはデフォルト設定で有効にする場合はブール値 true

const swiper = new Swiper('.swiper', {
  controller: {
    inverse: true,
  },
});

Coverflow-effect パラメータを持つオブジェクト。

const swiper = new Swiper('.swiper', {
  effect: 'coverflow',
  coverflowEffect: {
    rotate: 30,
    slideShadows: false,
  },
});

有効にすると、Swiper は自動的にスライドを swiper-wrapper 要素でラップし、ナビゲーション、ページネーション、スクロールバーに必要な要素を作成します（それぞれのパラメータオブジェクトまたはブール値 true で有効になっている場合）。

Creative-effect パラメータを持つオブジェクト

const swiper = new Swiper('.swiper', {
  effect: 'creative',
  creativeEffect: {
    prev: {
      // will set `translateZ(-400px)` on previous slides
      translate: [0, 0, -400],
    },
    next: {
      // will set `translateX(100%)` on next slides
      translate: ['100%', 0, 0],
    },
  },
});

有効にすると、最新の CSS Scroll Snap API が使用されます。Swiper のすべての機能がサポートされているわけではありませんが、シンプルな構成ではパフォーマンスが大幅に向上する可能性があります。

有効にした場合にサポートされない機能は次のとおりです

• キューブ効果
• speed パラメータが効果がない場合があります
• すべてのトランジション開始/終了関連イベント (代わりに slideChange を使用)
• slidesPerGroup は限定的なサポートのみ
• simulateTouch は効果がなく、マウスでの「ドラッグ」は機能しません
• resistance は効果がありません
• allowSlidePrev/Next
• swipeHandler

他のエフェクト、特に3Dエフェクトと組み合わせて使用する場合は、スライドのコンテンツを<div className="swiper-slide-transform">要素でラップする必要があります。また、スライドにカスタムスタイル（背景色、ボーダー半径、ボーダーなど）を使用する場合は、swiper-slide-transform要素に設定する必要があります。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <!-- wrap slide content with transform element -->
      <div class="swiper-slide-transform">
        ... slide content ...
      </div>
    </div>
    ...
  </div>
</div>
<script>
const swiper = new Swiper('.swiper', {
   effect: 'flip',
   cssMode: true,
 });
</script>

キューブエフェクトのパラメータを持つオブジェクト

const swiper = new Swiper('.swiper', {
  effect: 'cube',
  cubeEffect: {
    slideShadows: false,
  },
});

'horizontal'または'vertical'（縦型スライダーの場合）を指定できます。

アプリでのスワイプバック操作のためにSwiperイベントを解放するように有効にします。'prevent'に設定すると、代わりにシステムのスワイプバックナビゲーションを防止します。この機能は、「タッチ」イベント（ポインターイベントではない）でのみ機能するため、iOS/Androidデバイスでは動作しますが、ポインター（タッチ）イベントを使用するWindowsデバイスでは動作しません。

アプリでスワイプバック操作のためにタッチイベントを解放する、画面の左端からの領域（ピクセル単位）

トランジションエフェクト。'slide'、'fade'、'cube'、'coverflow'、'flip'、'creative'、または'cards'を指定できます。

Swiperが最初に有効になっているかどうか。Swiperが無効になっている場合、すべてのナビゲーション要素が非表示になり、イベントやインタラクションに応答しません。

Swiper要素（Webコンポーネント）によって発行されるすべてのDOMイベントのイベント名プレフィックス

フェードエフェクトのパラメータを持つオブジェクト

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

フリップエフェクトのパラメータを持つオブジェクト

const swiper = new Swiper('.swiper', {
  effect: 'flip',
  flipEffect: {
    slideShadows: false,
  },
});

フォーカス可能な要素のCSSセレクター。これらの要素が「フォーカス」されている場合、スワイプは無効になります。

無効にすると、スライダーは指を離したときにのみアニメーション化され、指で押さえている間は移動しません。

フリーモード機能を有効にします。フリーモードのパラメータを持つオブジェクト、またはデフォルト設定で有効にする場合はブール値trueを指定します。

const swiper = new Swiper('.swiper', {
  freeMode: true,
});

const swiper = new Swiper('.swiper', {
  freeMode: {
    enabled: true,
    sticky: true,
  },
});

このオプションは、デスクトップでの使いやすさを少し向上させる可能性があります。trueの場合、ユーザーはSwiperにカーソルを合わせたときに「グラブ」カーソルが表示されます。

「複数行」スライダーを有効にするためのグリッドパラメータを持つオブジェクト。

const swiper = new Swiper('.swiper', {
  grid: {
    rows: 2,
  },
});

スライドのハッシュURLナビゲーションを有効にします。ハッシュナビゲーションのパラメータを持つオブジェクト、またはデフォルト設定で有効にする場合はブール値trueを指定します。

const swiper = new Swiper('.swiper', {
  hashNavigation: {
    replaceState: true,
  },
});

Swiperの高さ（ピクセル単位）。このパラメータを使用すると、Swiperの高さを強制できます。Swiperを非表示の状態で初期化する場合や、正しいSwiperの初期化のためにSSRおよびテスト環境でのみ役立ちます。

このパラメータを設定すると、Swiperはレスポンシブになりません。

すべてのスライドが独自のURLを持つ履歴プッシュ状態を有効にします。このパラメータでは、"slides"のようなメインのスライドURLを指定し、data-history属性を使用して各スライドのURLを指定する必要があります。

履歴ナビゲーションのパラメータを持つオブジェクト、またはデフォルト設定で有効にする場合はブール値trueを指定します。

const swiper = new Swiper('.swiper', {
  history: {
    replaceState: true,
  },
});

<!-- will produce "slides/slide1" url in browser history -->
<div class="swiper-slide" data-history="slide1"></div>

インスタンスを作成するときにSwiperを自動的に初期化するかどうか。無効になっている場合は、swiper.init()を呼び出して手動で初期化する必要があります。

初期スライドのインデックス番号。

シャドウDOMにテキストスタイルを挿入します。Swiper Elementでのみ使用します

シャドウDOMにスタイル<link>を挿入します。Swiper Elementでのみ使用します

キーボードを使用したスライドのナビゲーションを有効にします。キーボードのパラメータを持つオブジェクト、またはデフォルト設定で有効にする場合はブール値trueを指定します。

const swiper = new Swiper('.swiper', {
  keyboard: {
    enabled: true,
    onlyInViewport: false,
  },
});

プリロードする次と前のスライドの数。遅延読み込みを使用している場合にのみ適用されます。

遅延プリローダーのCSSクラス名

長いスワイプを無効にする場合はfalseに設定します。

長いスワイプ中に次/前のスライドへのスワイプをトリガーするための最小時間（ミリ秒単位）

長いスワイプ中に次/前のスライドへのスワイプをトリガーする比率

連続ループモードを有効にする場合はtrueに設定します。

ループモードの仕組み（スライドが再配置される）の性質上、スライドの合計数は次の値以上である必要があります

• slidesPerView + slidesPerGroup
• slidesPerGroupに偶数（またはloopAddBlankSlidesパラメータを使用）
• grid.rowsに偶数（またはloopAddBlankSlidesパラメータを使用）

グリッドまたはslidesPerGroupを使用しており、スライドの合計数がslidesPerGroupまたはgrid.rowsに対して偶数でない場合に、自動的に空白のスライドを追加します。

ループするスライドの量を増やすことができます

有効にすると、スライダーがループモードでアニメーション化している間、slideNext/Prevは何も行いません。

スライドの合計数がここで指定した値よりも少ない場合、Swiperはスライド要素でbackface-visibility: hiddenを有効にして、Safariでの視覚的な「ちらつき」を減らします。

パフォーマンスが低下するため、大量のスライドで有効にすることは推奨されません。

Swiperモジュールの配列

import Swiper from 'swiper';
import { Navigation, Pagination } from 'swiper/modules';

const swiper = new Swiper('.swiper', {
   modules: [ Navigation, Pagination ],
 });

マウスホイールを使用したスライドのナビゲーションを有効にします。マウスホイールのパラメータを持つオブジェクト、またはデフォルト設定で有効にする場合はブール値trueを指定します。

const swiper = new Swiper('.swiper', {
  mousewheel: {
    invert: true,
  },
});

ナビゲーションパラメータを持つオブジェクト、またはデフォルト設定で有効にする場合はブール値trueを指定します。

const swiper = new Swiper('.swiper', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

タッチイベントの正しいインターセプトのために、Swiperでtrueに設定します。親と同じ方向を使用するスワイパーでのみ使用してください。

noSwipingClassで指定されたクラスに一致する要素でのスワイプを有効/無効にします。

noSwipingの要素CSSクラスを指定します

noSwipingClassの代わりに、スワイプを無効にする要素を指定するために使用できます。たとえば、'input'はすべての入力でのスワイプを無効にします

スライドインデックスを正規化します。

Swiperの親要素のミューテーションも監視する必要がある場合はtrueに設定します。

Swiperのスライド子要素のミューテーションも監視する必要がある場合はtrueに設定します。

Swiperとその要素でMutation Observerを有効にする場合はtrueに設定します。この場合、スタイルを変更（非表示/表示など）したり、子要素（スライドの追加/削除など）を変更したりすると、Swiperが更新（再初期化）されます。

イベントハンドラーを登録します

すべてのイベントで発生するイベントリスナーを追加します

const swiper = new Swiper('.swiper', {
   onAny(eventName, ...args) {
     console.log('Event: ', eventName);
     console.log('Event data: ', args);
   }
 });

有効にすると、スワイプ方向に関係なく、スライドを前方（一方向）にのみスワイプします。

ページネーションのパラメータを持つオブジェクト、またはデフォルト設定で有効にする場合はブール値trueを指定します。

const swiper = new Swiper('.swiper', {
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
  },
});

視差効果のパラメータを持つオブジェクト、またはデフォルト設定で有効にする場合はブール値trueを指定します。

const swiper = new Swiper('.swiper', {
  parallax: true,
});

モバイルデバイスでのスクロールパフォーマンスを向上させるために、可能な場合はデフォルトでパッシブイベントリスナーが使用されます。ただし、e.preventDefaultを使用する必要があり、競合が発生する場合は、このパラメータを無効にする必要があります。

スワイプ中のリンクでの意図しない不要なクリックを防ぐ場合は、trueに設定します。

スワイプ中のリンクでのクリックイベントの伝播を停止する場合は、trueに設定します。

有効にすると、トランジション中にスワイプまたはナビゲーション/ページネーションボタンによるスライドの変更を許可しません。

抵抗境界を無効にする場合は、falseに設定します。

このオプションを使用すると、抵抗比率を制御できます

有効にすると、コンテナのサイズ変更を検出するために（ウィンドウのサイズ変更を監視する代わりに）、スワイパーコンテナでResizeObserver（ブラウザでサポートされている場合）を使用します。

「巻き戻し」モードを有効にする場合はtrueに設定します。有効にすると、最後のスライドで「次へ」ナビゲーションボタンをクリックする（または.slideNext()を呼び出す）と、最初のスライドに戻ります。最初のスライドで「前へ」ナビゲーションボタンをクリックする（または.slidePrev()を呼び出す）と、最後のスライドに進みます。

loopモードと一緒に使用しないでください

通常解像度の画面で（そのような場合）テキストがぼやけないように、スライドの幅と高さの値を丸める場合はtrueに設定します。

スワイパーの初期化時にトランジション/スライド変更/開始/終了イベントを発行します。このようなイベントは、初期スライドが0でない場合、またはループモードを使用する場合に初期化時に発行されます。

スクロールバーのパラメータを持つオブジェクト、またはデフォルト設定で有効にする場合はブール値trueを指定します。

const swiper = new Swiper('.swiper', {
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
  },
});

このオプションを有効にすると、プラグインはすべてのスライドの合計サイズに等しい幅/高さをスワイパーラッパーに設定します。主に、flexboxレイアウトを適切にサポートしていないブラウザの互換性フォールバックオプションとして使用する必要があります。

短いスワイプを無効にする場合は、falseに設定します。

trueの場合、Swiperはタッチイベントのようにマウスイベントを受け入れます（クリックしてドラッグしてスライドを変更します）。

現在アクティブなスライドのCSSクラス名

クラスを変更する場合は、変更されたクラスを反映するようにSwiperのCSSも変更する必要があります。

Swiper React/Vueコンポーネントではサポートされていません

ループモードによって追加された空白のスライドのCSSクラス名（loopAddBlankSlidesが有効な場合）

Swiper React/Vueではサポートされていません

スライドのCSSクラス名

クラスを変更する場合は、変更されたクラスを反映するようにSwiperのCSSも変更する必要があります。

Swiper React/Vueコンポーネントではサポートされていません

完全に（スライド全体がビューポート内にある場合）表示されているスライドのCSSクラス名

Swiper React/Vueではサポートされていません

現在アクティブなスライドのすぐ右にあるスライドのCSSクラス名

クラスを変更する場合は、変更されたクラスを反映するようにSwiperのCSSも変更する必要があります。

Swiper React/Vueではサポートされていません

現在アクティブなスライドのすぐ左にあるスライドのCSSクラス名

クラスを変更する場合は、変更されたクラスを反映するようにSwiperのCSSも変更する必要があります。

Swiper React/Vueではサポートされていません

trueに設定すると、任意のスライドをクリックすると、そのスライドへのトランジションが生成されます

現在/部分的に表示されているスライドのCSSクラス名

クラスを変更する場合は、変更されたクラスを反映するようにSwiperのCSSも変更する必要があります。

Swiper React/Vueではサポートされていません

コンテナの末尾（すべてのスライドの後）に追加のスライドオフセット（ピクセル単位）を追加します。

コンテナの先頭（すべてのスライドの前）に追加のスライドオフセットをpx単位で追加します。

グループスライドを定義および有効にするスライド数を設定します。slidesPerView > 1 と組み合わせて使用すると便利です。

このパラメーターは、slidesPerView: 'auto' および slidesPerGroup: 1 でのみ使用することを目的としています。有効にすると、.slideNext() および .slidePrev() メソッドの呼び出し、ナビゲーションの「ボタン」クリック、および自動再生で、表示されているすべてのスライドをスキップします。

このパラメータは次のように動作します。slidesPerGroupSkip が 0 (デフォルト) の場合、グループ化から除外されるスライドはなく、結果の動作は、この変更がない場合と同じになります。

slidesPerGroupSkip が 1 以上の場合、最初の X 個のスライドは単一のグループとして扱われ、後続のすべてのスライドは slidesPerGroup 値によってグループ化されます。

1つのビューあたりのスライド数（スライダーのコンテナ上で同時に表示されるスライド数）。

slidesPerView: 'auto' は現在、grid.rows > 1 の場合の複数行モードと互換性がありません。

スライド間の距離（px単位）。

「spaceBetween」を渡すSwiperに配置される要素に "margin" CSSプロパティを使用すると、ナビゲーションが正しく機能しない場合があります。

スライド間の遷移時間（ミリ秒単位）

スワイプの唯一の利用可能なハンドラーとして機能する、ページネーションを含むコンテナのCSSセレクターまたはHTML要素の文字列。

スワイパー要素のノード名。Webコンポーネントのレンダリングを検出するために使用されます。

しきい値（px単位）。「タッチ距離」がこの値より低い場合、スワイパーは移動しません。

サムネイルコンポーネントのパラメーターを持つオブジェクト。

const swiper = new Swiper('.swiper', {
  ...
  thumbs: {
    swiper: thumbsSwiper
  }
});

タッチ移動をトリガーするための許容角度（度単位）。

タッチイベントをリッスンするターゲット要素。'container'（スワイパーでタッチイベントをリッスンする場合）または'wrapper'（スワイパーラッパーでタッチイベントをリッスンする場合）を指定できます。

有効にすると、「touchmove」の伝播が停止します。

タッチレシオ。

スライダーのエッジ位置（先頭、末尾）でタッチイベントを解放して、ページのさらなるスクロールを許可できるようにします。この機能は、「タッチ」イベント（およびポインターイベントではない）でのみ機能するため、iOS / Androidデバイスでは機能しますが、ポインターイベントを使用するWindowsデバイスでは機能しません。また、threshold パラメーターを 0 に設定する必要があります。

touchstart (pointerdown) イベントに対して常にデフォルトを防止するように強制します。

無効にすると、pointerdown イベントは防止されません。

有効（デフォルト）で、ナビゲーション要素のパラメータが文字列（".pagination"など）として渡される場合、Swiperは最初に子要素を通してそのような要素を探します。ページネーション、前/次ボタン、およびスクロールバー要素に適用されます。

Swiperは、ウィンドウサイズ変更（orientationchange）時にスライドの位置を再計算します。

サーバー側でレンダリングされ、履歴が有効になっている場合に、アクティブなスライドを検出するために必要です。

ユーザーエージェント文字列。サーバー側でレンダリングされる場合に、ブラウザ/デバイスの検出に必要です。

仮想スライド機能を有効にします。仮想スライドのパラメータを持つオブジェクト、またはデフォルト設定で有効にする場合はブール値 true を指定します。

const swiper = new Swiper('.swiper', {
  virtual: {
    slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'],
  },
});

このオプションを有効にすると、スワイパーは通常どおり動作しますが、移動せず、ラッパーの実際のtranslate値は設定されません。カスタムスライド遷移を作成する必要がある場合に便利です。

有効にすると、スライドが足りないためにスライドできない場合、Swiperは無効になり、ナビゲーションボタンが非表示になります。

この機能を有効にすると、各スライドの進行状況と可視性が計算されます（ビューポート内のスライドには追加の可視クラスが付きます）。

Swiperの幅（px単位）。このパラメータを使用すると、Swiperの幅を強制できます。Swiperが非表示の場合や、SSR環境およびテスト環境で正しいSwiperの初期化のために、初期化する場合にのみ便利です。

このパラメータを設定すると、Swiperはレスポンシブになりません。

スライドのラッパーのCSSクラス名。

クラスを変更する場合は、変更されたクラスを反映するようにSwiperのCSSも変更する必要があります。

Swiper React/Vueではサポートされていません

ズーム機能を有効にします。ズームパラメータを持つオブジェクト、またはデフォルト設定で有効にする場合はブール値 true を指定します。

const swiper = new Swiper('.swiper', {
  zoom: {
    maxRatio: 5,
  },
});

ナビゲーションボタンが無効になったときに追加されるCSSクラス名

特定のブレークポイントでナビゲーションを有効/無効にするためにブレークポイントで使用するブール値プロパティ

ナビゲーションボタンが非表示になったときに追加されるCSSクラス名

スライダーのコンテナをクリックした後、ナビゲーションボタンの表示を切り替えます。

ナビゲーションボタンが無効になっているときに追加されるCSSクラス名

ブレークポイントによってナビゲーションが無効になっているときに、swiperコンテナに追加されるCSSクラス名

クリック後に「次へ」ボタンのように機能する要素のCSSセレクターまたはHTML要素の文字列

クリック後に「前へ」ボタンのように機能する要素のCSSセレクターまたはHTML要素の文字列

現在アクティブなページネーション箇条書きのCSSクラス名

単一のページネーション箇条書きのCSSクラス名

単一のページネーション箇条書きを表すために使用されるHTMLタグを定義します。'bullets'ページネーションタイプの場合のみです。

trueの場合、ページネーションボタンをクリックすると、適切なスライドへのトランジションが発生します。箇条書きページネーションタイプの場合のみ

クリック可能な場合にページネーションに設定されるCSSクラス名

「分数」ページネーションで現在アクティブなインデックスを持つ要素のCSSクラス名

多数のスライドで箇条書きページネーションを使用する場合に有効にすると便利です。これにより、同時に表示される箇条書きが少数のみに維持されます。

dynamicBulletsが有効になっているときに表示されるメイン箇条書きの数。

ページネーションを含むコンテナのCSSセレクターまたはHTML要素の文字列

特定のブレークポイントでページネーションを有効/無効にするためにブレークポイントで使用するブール値プロパティ

分数のページネーションの現在の数をフォーマットします。関数は現在の数値を受け取り、フォーマットされた値を返す必要があります。

分数のページネーションの合計数をフォーマットします。関数は合計数を受け取り、フォーマットされた値を返す必要があります。

ページネーションが非アクティブになったときのCSSクラス名

スライダーのコンテナをクリックした後に、ページネーションコンテナの表示/非表示を切り替えます。

水平方向のスライダーでページネーションに設定されるCSSクラス名

ページネーションが無効になっているときに設定されるCSSクラス名

パラメータに応じてページネーションに追加される修飾子CSSクラス名の先頭部分

ブレークポイントによってページネーションが無効になっている場合に、スライダーコンテナとページネーション要素に追加されるCSSクラス名

ページネーションのプログレスバーの塗りつぶし要素のCSSクラス名

ページネーションのプログレスバーをスライダーのdirectionパラメータとは逆にする。つまり、水平方向のスライダーには垂直方向のプログレスバー、垂直方向のスライダーには水平方向のプログレスバーを意味します。

ページネーションのプログレスバーの逆向きのCSSクラス名

このパラメータを使用すると、ページネーションのドットを完全にカスタマイズできます。ここでは、ページネーションドットのindex番号と必須要素のクラス名 (className) を受け取る関数を渡す必要があります。'bullets' ページネーションタイプの場合のみ

const swiper = new Swiper('.swiper', {
  //...
  renderBullet: function (index, className) {
    return '<span class="' + className + '">' + (index + 1) + '</span>';
  }
});

このパラメータは、'custom' ページネーションタイプで、どのようにレンダリングする必要があるかを指定する必要がある場合に必須です。

const swiper = new Swiper('.swiper', {
  //...
  renderCustom: function (swiper, current, total) {
    return current + ' of ' + total;
  }
});

このパラメータを使用すると、「分数」ページネーションのHTMLをカスタマイズできます。'fraction' ページネーションタイプの場合のみ

const swiper = new Swiper('.swiper', {
  //...
  renderFraction: function (currentClass, totalClass) {
      return '<span class="' + currentClass + '"></span>' +
              ' of ' +
              '<span class="' + totalClass + '"></span>';
  }
});

このパラメータを使用すると、「プログレス」ページネーションをカスタマイズできます。'progress' ページネーションタイプの場合のみ

const swiper = new Swiper('.swiper', {
  //...
  renderProgressbar: function (progressbarFillClass) {
      return '<span class="' + progressbarFillClass + '"></span>';
  }
});

「分数」ページネーションの「スナップ」の総数を持つ要素のCSSクラス名

ページネーションのタイプを表す文字列。'bullets'、'fraction'、'progressbar'、または'custom'を指定できます。

垂直方向のスライダーでページネーションに設定されるCSSクラス名

スクロールバーのドラッグ可能な要素のCSSクラス

スクロールバーのドラッグ可能な要素のサイズ（px単位）

スクロールバーをドラッグ可能にしてスライダーの位置を制御できるようにするには、trueに設定します。

スクロールバーを持つコンテナのCSSセレクタまたはHTML要素を表す文字列。

特定のブレークポイントでスクロールバーを有効/無効にするためにブレークポイントで使用するブール値プロパティ

ユーザー操作後にスクロールバーを自動的に非表示にする

水平方向のスライダーでスクロールバーに設定されるCSSクラス名

スクロールバーが無効になっている場合の、スクロールバー要素の追加のCSSクラス

ブレークポイントによってスクロールバーが無効になっている場合に、スライダーコンテナとスクロールバー要素に追加されるCSSクラス名

スクロールバーを離したときにスライダーの位置をスライドにスナップさせるには、trueに設定します。

垂直方向のスライダーでスクロールバーに設定されるCSSクラス名

トランジション間の遅延時間（ミリ秒単位）。このパラメータが指定されていない場合、自動再生は無効になります

特定の スライドに異なる遅延時間を指定する必要がある場合は、スライドにdata-swiper-autoplay（ミリ秒単位）属性を使用することで指定できます。

<!-- hold this slide for 2 seconds -->
<div class="swiper-slide" data-swiper-autoplay="2000">

falseに設定すると、ユーザー操作（スワイプ）の後でも自動再生は無効にならず、操作後毎回再開されます。

有効にすると、ポインタ（マウス）がスライダーコンテナに入ったときに自動再生が一時停止します。

逆方向での自動再生を有効にします

このパラメータを有効にすると、最後のスライドに到達したときに自動再生が停止します（ループモードでは効果がありません）。

有効にすると、自動再生はラッパートランジションが完了するのを待ってから続行します。スライダーにトランジションがない可能性がある仮想translateを使用している場合は、無効にできます。

フリーモードが有効になっているかどうか

フリーモードの運動量をトリガーするために必要な最小のtouchmove速度

有効にすると、スライドはリリース後しばらく移動し続けます。

フリーモードでの運動量バウンスを無効にする場合は、falseに設定します。

値が高いほど、運動量バウンス効果が大きくなります

値が高いほど、スライダーをリリース後の運動量距離が長くなります

値が高いほど、スライダーをリリース後の運動量速度が大きくなります

フリーモードでスライド位置へのスナップを有効にするには、有効に設定します

'column'または'row'を指定できます。スライドを行にどのように配置するか（列ごとまたは行ごと）を定義します

ループモードで使用する場合は、スライドの数がループモードの要件で指定されていることを確認するか、loopAddBlankSlidesパラメータを有効にしてください

複数行レイアウトのスライドの行数

スライダー内で「パララックス」要素を使用する場合は有効にします。

スライドのクロスフェードを有効にします

px単位の奥行きオフセット（スライドはZ軸で移動します）

効果の乗数

度単位のスライド回転

スライドスケール効果

スライドシャドウを有効にします

スライド間のスペースを拡張します（px単位）

端のスライドの回転を制限します

スライドシャドウを有効にします

メインスライダーの影を有効にします

px単位のメイン影オフセット

メイン影のスケール比率

スライドシャドウを有効にします

スライドごとのオフセット距離（px単位）

スライドごとの回転角度（度単位）

カードの回転を有効にします

スライドシャドウを有効にします

サイドスライドの量に対する進行/オフセットを制限します。1の場合、前/次の後のすべてのスライドが同じ状態になります。2の場合、アクティブなスライドの前/後の2番目の後のすべてのスライドが同じ状態になります。

次のスライドの変形。

{
  // Array with translate X, Y and Z values
  translate: (string | number)[];
  // Array with rotate X, Y and Z values (in deg)
  rotate?: number[];
  // Slide opacity
  opacity?: number;
  // Slide scale
  scale?: number;
  // Enables slide shadow
  shadow?: boolean;
  // Transform origin, e.g. `left bottom`
  origin?: string;
}

カスタム変形に3D変形（translateZ、rotateX、rotateY）が必要な場合は、このパラメータを有効にします。

前のスライドの変形。次のタイプのオブジェクトを受け入れます。

{
  // Array with translate X, Y and Z values
  translate: (string | number)[];
  // Array with rotate X, Y and Z values (in deg)
  rotate?: number[];
  // Slide opacity
  opacity?: number;
  // Slide scale
  scale?: number;
  // Enables slide shadow
  shadow?: boolean;
  // Transform origin, e.g. `left bottom`
  origin?: string;
}

スライドの変形と不透明度を乗算できます。

limitProgressに基づいてスライドごとに影の「不透明度」を分割します（変形の影が有効な場合のみ）。たとえば、limitProgress: 2を設定してshadowPerProgressを有効にすると、アクティブなスライドの隣の2つのスライドの影の不透明度が0.5と1に設定されます。このパラメータを無効にすると、アクティブなスライドを除くすべてのスライドの影の不透明度が1になります。

どのサムネイルのアクティブスライドが端から自動的にサムネイルをスクロールするかを設定できます。たとえば、1に設定すると、最後に表示されているサムネイルがアクティブ化されると（端から1）、サムネイルが自動スクロールされます。

有効にすると、複数のサムネイルスライドがアクティブになる可能性があります

アクティブ化されたサムネイルスワイパーのスライドに追加される追加のクラス

サムネイルとして使用されるスワイパーのスワイパーインスタンス、またはサムネイルスワイパーを初期化するためのスワイパーパラメータを持つオブジェクト

サムネイルスワイパーに追加される追加のクラス

ズームコンテナのCSSクラス名

trueに設定すると、画像は元のサイズの100％を超えて拡大縮小されません

画像の最大ズーム倍率

画像の最小ズーム倍率

スライドのダブルタップによるズームインを有効/無効にします

ズームインされたコンテナのCSSクラス名

キーボードコントロールを有効にするには、trueに設定します

有効にすると、現在ビューポート内にあるスライダーを制御します

有効にすると、Page UpキーとPage Downキーによるキーボードナビゲーションが有効になります

マウスホイール操作を有効にするにはtrueを設定します

マウスホイールイベントを受け付けるコンテナのCSSセレクターまたはHTML要素の文字列。デフォルトはswiperです

マウスホイールのスワイプを軸に強制するには、trueを設定します。したがって、水平モードでは、マウスホイールは水平方向のマウスホイールスクロールでのみ機能し、垂直モードでは垂直方向のスクロールでのみ機能します。

スライド方向を反転するには、trueを設定します

このクラスを持つ要素のスクロールは無視されます

trueに設定すると、swiperが端の位置（先頭または末尾）にある場合、swiperはマウスホイールイベントを解放し、ページスクロールを許可します

マウスホイールデータの乗数。マウスホイールの感度を調整できます

swiperのスライド変更をトリガーするための最小マウスホイールスクロールデルタ

swiperのスライド変更をトリガーするための最小マウスホイールスクロール時間デルタ（ミリ秒単位）

アクティブなスライドの後に事前にレンダリングするスライドの量を増やします

アクティブなスライドの前に事前にレンダリングするスライドの量を増やします

レンダリングされたスライドのHTML要素のDOMキャッシュを有効にします。レンダリングされると、キャッシュに保存され、そこから再利用されます。

仮想スライドが有効かどうか

外部レンダリングのための関数（例：React.jsやVue.jsのようなDOM操作と状態を処理するための他のライブラリを使用）。引数として、次のプロパティを持つdataオブジェクトを受け取ります

• offset - スライドの左/上オフセット（px）
• from - レンダリングが必要な最初のスライドのインデックス
• to - レンダリングが必要な最後のスライドのインデックス
• slides - レンダリングされるスライドアイテムの配列

有効（デフォルト）の場合、renderExternalが呼び出された直後にSwiperレイアウトを更新します。非同期にレンダリングするレンダリングライブラリで使用する場合は、無効にしてSwiperを手動で更新すると便利です。

スライドをレンダリングする関数。引数として、slides配列の現在のスライドアイテムと現在のスライドのインデックス番号を受け取ります。関数は、swiperスライドまたはスライドHTML要素の外側のHTMLを返す必要があります。

スライドの配列

ハッシュでDOM内のスライドを見つけることが不可能な場合（例：まだレンダリングされていない場合）、仮想スライドで使用するように設計されています

履歴に追加する代わりに、現在のURL状態を新しいURL状態に置き換えるために、hashnavに加えて機能します

ドキュメントロケーションに直接ハッシュを設定したり、ブラウザの履歴を使用してスライド間のナビゲーションを（hashnavが有効な場合）有効にするには、trueに設定します

履歴プラグインを有効にします。

ブラウザのURLを変更するときにクエリパラメーターを保持します。

スライドのURLキー

履歴に追加する代わりに、現在のURL状態を新しいURL状態に置き換えるために、hashnavまたは履歴に加えて機能します

Swiperページルート。ルートWebサイトページ以外でSwiper履歴モードを使用する場合に指定すると便利です。たとえば、https://my-website.com/またはhttps://my-website.com/subpage/または/subpage/にすることができます

別のスライダーを制御する方法を定義します。スライドごとに（他のスライダーのグリッドに関して）またはすべてのスライド/コンテナ（合計スライダーのパーセンテージに応じて）に依存します。

このSwiperで制御する必要がある別のSwiperインスタンスまたはSwiperインスタンスの配列をここに渡します。また、Swiper要素のCSSセレクターの文字列、またはSwiper要素のHTMLElementも受け入れます

trueを設定すると、制御は逆方向になります

外側のswiperコンテナのスクリーンリーダーのメッセージ

外側のswiperコンテナの役割を説明するスクリーンリーダーのメッセージ

A11yを有効にします

swiperが最初のスライドにある場合の前のボタンのスクリーンリーダーのメッセージ

swiper-wrapperに設定するid属性の値。nullの場合は自動的に生成されます

スライド要素の役割を説明するスクリーンリーダーのメッセージ

swiperが最後のスライドにある場合の次のボタンのスクリーンリーダーのメッセージ

次のボタンのスクリーンリーダーのメッセージ

A11y通知のCSSクラス名

単一のページネーションブレットのスクリーンリーダーのメッセージ

前のボタンのスクリーンリーダーのメッセージ

スライド要素のラベルを説明するスクリーンリーダーのメッセージ

swiperスライドのrole属性の値