Swiper API

具有 a11y 參數的物件或布林值 true 以啟用預設設定。

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

設定為 false 以停用向下一張投影片方向滑動（向右或向下）

設定為 false 以停用向上張投影片方向滑動（向左或向上）

如果為 false，則切換投影片的唯一方法是使用外部 API 函式，例如 slidePrev 或 slideNext

設定為 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 容器寬度

具有卡片效果參數的物件

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 效果參數的物件。

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

啟用後，Swiper 會自動將幻燈片包裝在 swiper-wrapper 元素中，並會為已啟用的導航、分頁和捲軸建立所需的元素（使用它們各自的參數物件或布林值 true）。

包含 Creative 效果參數的物件。

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 的所有功能，但在簡單的配置中，可能會帶來更好的效能。

啟用時不支援的功能如下：

• Cube 效果
• 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>

包含 Cube 效果參數的物件。

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 元素（網頁元件）發出的所有 DOM 事件的事件名稱前綴。

包含 Fade 效果參數的物件。

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

包含 Flip 效果參數的物件。

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 隱藏時以及在 SSR 和測試環境中初始化 Swiper 時才有用，以便正確初始化 Swiper。

設定此參數會使 Swiper 沒有回應性。

啟用歷史記錄推送狀態，其中每個幻燈片都有其自己的 URL。在此參數中，您必須指定主要幻燈片 URL（例如 "slides"），並使用 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 元素。

將樣式 <link> 注入到陰影 DOM。僅適用於 Swiper 元素。

啟用使用鍵盤瀏覽幻燈片。包含鍵盤參數的物件，或布林值 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，以便正確攔截觸控事件。僅在與父 Swiper 使用相同方向的 Swiper 上使用。

啟用/停用在與 noSwipingClass 中指定的類別相符的元素上的滑動。

指定 noSwiping 的元素 CSS 類別。

可以用來代替 noSwipingClass 來指定停用滑動的元素。例如，'input' 將停用所有輸入上的滑動。

正規化幻燈片索引。

如果您還需要監看 Swiper 父元素的 Mutation，請設定為 true。

如果您還需要監看 Swiper 幻燈片子元素的 Mutation，請設定為 true。

設定為 true 以在 Swiper 及其元素上啟用 Mutation Observer。在這種情況下，如果您變更其樣式（例如隱藏/顯示）或修改其子元素（例如新增/移除幻燈片），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。

此選項可讓您控制阻力比率。

啟用後，它將在 swiper 容器上使用 ResizeObserver（如果瀏覽器支援），以偵測容器大小調整（而不是監看視窗大小調整）。

設定為 true 以啟用「倒帶」模式。啟用後，當在最後一張幻燈片上按一下「下一個」導航按鈕（或呼叫 .slideNext()）時，會滑回第一張幻燈片。當在第一張幻燈片上按一下「上一個」導航按鈕（或呼叫 .slidePrev()）時，會滑到最後一張幻燈片。

不應與 loop 模式一起使用。

設定為 true 以將幻燈片寬度和高度的值四捨五入，以防止在一般解析度的螢幕上出現模糊的文字（如果您有這種情況）。

在 swiper 初始化時觸發 Transition/SlideChange/Start/End 事件。如果您的 initialSlide 不是 0，或者您使用循環模式，則會在初始化時觸發此類事件。

包含捲軸參數的物件，或布林值 true 以啟用預設設定。

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

啟用此選項後，外掛程式將在 swiper 包裝器上設定與所有幻燈片總大小相等的寬度/高度。主要應作為不支援 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 中不支援。

在容器末端（所有滑塊之後）加入額外的滑塊偏移量（以像素為單位）

在容器開頭（所有滑塊之前）加入額外的滑塊偏移量（以像素為單位）

設定滑塊數量以定義和啟用群組滑動。與 slidesPerView > 1 一起使用很有用

此參數僅適用於 slidesPerView: 'auto' 和 slidesPerGroup: 1。啟用後，它會在 .slideNext() 和 .slidePrev() 方法呼叫、導覽「按鈕」點擊和自動播放時，跳過所有在視圖中的滑塊。

此參數以以下方式運作：如果 slidesPerGroupSkip 等於 0（預設值），則不會將任何滑塊排除在分組之外，且產生的行為與沒有此變更時相同。

如果 slidesPerGroupSkip 大於或等於 1，則前 X 個滑塊會被視為單獨的群組，而後續所有滑塊則會按 slidesPerGroup 值分組。

每個視圖的滑塊數量（在滑塊容器上同時可見的滑塊）。

slidesPerView: 'auto' 目前與多行模式（當 grid.rows > 1 時）不相容

滑塊之間的距離（以像素為單位）。

如果您對放入 Swiper 的元素使用「margin」css 屬性，並將「spaceBetween」傳入其中，導覽可能無法正常運作。

滑塊之間轉換的持續時間（以毫秒為單位）

具有分頁的容器的 CSS 選擇器或 HTML 元素字串，該容器將作為滑動的唯一可用處理器

滑塊元素節點的名稱；用於偵測 Web 元件渲染

閾值（以像素為單位）。如果「觸摸距離」低於此值，則滑塊不會移動

包含縮圖元件參數的物件

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

觸發觸摸移動的允許角度（以度為單位）

要監聽觸摸事件的目標元素。可以是 'container'（監聽滑塊上的觸摸事件）或 'wrapper'（監聽滑塊包裝器上的觸摸事件）

如果啟用，則會停止「touchmove」的傳播

觸摸比例

啟用後，在滑塊邊緣位置（開始、結束）釋放觸摸事件，以允許進一步的頁面滾動。此功能僅適用於「觸摸」事件（而非指標事件），因此它將在 iOS/Android 裝置上運作，而不會在具有指標事件的 Windows 裝置上運作。此外，threshold 參數必須設定為 0

強制始終阻止 touchstart (pointerdown) 事件的預設行為

如果停用，則不會阻止 pointerdown 事件

如果啟用（預設情況下），並且導覽元素的參數以字串形式傳遞（如 ".pagination"），則 Swiper 將首先在子元素中尋找此類元素。適用於分頁、上一個/下一個按鈕和滾動條元素

Swiper 將在視窗調整大小（方向變更）時重新計算滑塊位置

在伺服器端呈現並啟用歷程記錄時，需要用於活動滑塊偵測

userAgent 字串。在伺服器端呈現時，需要用於瀏覽器/裝置偵測

啟用虛擬滑塊功能。包含虛擬滑塊參數的物件或布林值 true 以使用預設設定啟用。

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

啟用此選項，滑塊將照常運作，但它不會移動，不會在包裝器上設定實際的轉換值。當您可能需要建立自訂滑塊轉換時很有用

啟用後，如果滑動的滑塊不足，Swiper 將被停用並隱藏導覽按鈕。

啟用此功能可計算每個滑塊的進度和可見性（視窗中的滑塊將具有額外的可見類別）

滑塊寬度（以像素為單位）。此參數允許強制設定滑塊寬度。僅當您在隱藏時初始化滑塊，以及在 SSR 和測試環境中進行正確的滑塊初始化時才有用

設定此參數會使 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 類別名稱

在點擊滑動容器後切換（隱藏/顯示）分頁容器的可見性

在水平 Swiper 中設定到分頁的 CSS 類別名稱

當分頁停用時，設定到分頁的 CSS 類別名稱

將根據參數新增到分頁的修飾符 CSS 類別名稱的開頭

當分頁因斷點而停用時，新增到 swiper 容器和分頁元素的 CSS 類別名稱

分頁進度條填充元素的 CSS 類別名稱

使分頁進度條與 Swiper 的 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'

在垂直 Swiper 中設定到分頁的 CSS 類別名稱

捲軸可拖曳元素的 CSS 類別

捲軸可拖曳元素的尺寸，單位為 px

設定為 true 以啟用可拖曳捲軸，讓您控制滑塊位置

帶有 CSS 選擇器或包含捲軸的 HTML 元素的字串。

布林值屬性，用於與斷點一起使用，以在特定斷點上啟用/停用捲軸

在使用者互動後自動隱藏捲軸

在水平 Swiper 中設定到捲軸的 CSS 類別名稱

停用時，捲軸元素的其他 CSS 類別

當捲軸因斷點而停用時，新增到 swiper 容器和捲軸元素的 CSS 類別名稱

設定為 true 以在您釋放捲軸時將滑塊位置對齊到幻燈片

在垂直 Swiper 中設定到捲軸的 CSS 類別名稱

轉換之間的延遲（以毫秒為單位）。如果未指定此參數，則會停用自動播放

如果您需要為特定的幻燈片指定不同的延遲，您可以在幻燈片上使用data-swiper-autoplay (以毫秒為單位) 屬性來完成。

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

設定為 false，自動播放將不會在使用者互動（滑動）後停用，它將在每次互動後重新啟動

啟用後，當指標 (滑鼠) 進入 Swiper 容器上方時，自動播放將會暫停。

啟用反向自動播放

啟用此參數，當自動播放到達最後一張幻燈片時將會停止（在循環模式下無效）

啟用後，自動播放將等待封裝轉換繼續。在使用虛擬轉換時，如果您的滑塊可能沒有轉換，則可以停用此功能

是否啟用自由模式

觸發自由模式動量所需的最低 touchmove 速度

如果啟用，則滑動會在您釋放後保持移動一段時間

如果您想在自由模式中停用動量彈跳，請設定為 false

數值越高，產生的動量彈跳效果越大

數值越高，您釋放滑塊後產生的動量距離越大

數值越高，您釋放滑塊後產生的動量速度越大

設定為啟用，以在自由模式中啟用對齊到幻燈片位置

可以是 'column' 或 'row'。定義幻燈片應如何按欄或按列填滿列

如果與循環模式一起使用，請確保幻燈片的數量已在循環模式要求中指定，或啟用 loopAddBlankSlides 參數

幻燈片列數，用於多列版面配置

如果要使用滑動條內的「視差」元素，請啟用此功能

啟用幻燈片交叉淡入淡出

深度偏移（以像素為單位）（幻燈片在 Z 軸上平移）

效果乘數

幻燈片旋轉角度（以度為單位）

幻燈片縮放效果

啟用幻燈片陰影

幻燈片之間的拉伸空間（以像素為單位）

限制邊緣幻燈片旋轉

啟用幻燈片陰影

啟用主滑動條陰影

主陰影偏移量（以像素為單位）

主陰影縮放比例

啟用幻燈片陰影

每個幻燈片的偏移距離（以像素為單位）

每個幻燈片的旋轉角度（以度為單位）

啟用卡片旋轉

啟用幻燈片陰影

將進度/偏移限制為側邊幻燈片的數量。如果為 1，則前一個/下一個之後的所有幻燈片將具有相同的狀態。如果為 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，將在活動幻燈片旁邊的兩個幻燈片上將陰影不透明度設定為 0.5 和 1。如果停用此參數，則活動幻燈片以外的所有幻燈片都將具有不透明度為 1 的陰影

允許設定從邊緣的哪個縮圖活動幻燈片應自動移動捲動縮圖。例如，如果設定為 1，並且最後一個可見的縮圖將被啟用（從邊緣算起第 1 個），則它將自動捲動縮圖

啟用後，可能會啟用多個縮圖幻燈片

將新增至啟用的縮圖滑動條幻燈片的其他類別

用作縮圖的滑動條的 Swiper 執行個體，或包含用於初始化縮圖滑動條的 Swiper 參數的物件

將新增至縮圖滑動條的其他類別

縮放容器的 CSS 類別名稱

如果設定為 true，圖片的縮放將不會超過其原始大小的 100%

最大圖片縮放乘數

最小圖片縮放乘數

如果設定為 true，則當滑鼠在圖片上移動時，放大的圖片會自動平移

啟用/停用透過雙擊幻燈片來放大

放大容器的 CSS 類別名稱

設定為 true 以啟用鍵盤控制

啟用時，將僅控制目前在可視範圍內的滑動軸

啟用時，將使用 Page Up 和 Page Down 鍵進行鍵盤導覽

設定為 true 以啟用滑鼠滾輪控制

接受滑鼠滾輪事件的容器之 CSS 選擇器字串或 HTML 元素。預設為 swiper

設定為 true 強制滑鼠滾輪滑動到軸向。因此，在水平模式下，滑鼠滾輪僅在水平滾動時有效，而在垂直模式下僅在垂直滾動時有效。

設定為 true 以反轉滑動方向

將忽略使用此類別的元素的滾動

設定為 true，當滑動軸處於邊緣位置（開頭或結尾）時，滑動軸將釋放滑鼠滾輪事件並允許頁面滾動

滑鼠滾輪資料的乘數，可調整滑鼠滾輪靈敏度

觸發滑動軸滑動變更的最小滑鼠滾輪滾動差值

觸發滑動軸滑動變更的最小滑鼠滾輪滾動時間差（以毫秒為單位）

增加活動幻燈片後預先呈現的幻燈片數量

增加活動幻燈片前預先呈現的幻燈片數量

啟用呈現的幻燈片 HTML 元素的 DOM 快取。一旦呈現，它們將被儲存到快取中並從快取中重複使用。

是否啟用虛擬幻燈片

用於外部呈現的函式（例如，使用其他程式庫來處理 DOM 操作和狀態，例如 React.js 或 Vue.js）。作為參數，它接受具有以下屬性的 data 物件

• offset - 幻燈片在 px 中的左/頂部偏移量
• from - 需要呈現的第一張幻燈片的索引
• to - 需要呈現的最後一張幻燈片的索引
• slides - 要呈現的幻燈片項目陣列

啟用時（預設值），它會在呼叫 renderExternal 後立即更新 Swiper 版面配置。當與以非同步方式呈現的呈現程式庫一起使用時，可用於停用並手動更新 swiper

用於呈現幻燈片的函式。作為參數，它接受 slides 陣列的當前幻燈片項目和當前幻燈片的索引編號。函式必須傳回滑動軸幻燈片的外部 HTML 或幻燈片 HTML 元素。

幻燈片陣列

設計用於虛擬幻燈片，當無法透過雜湊值在 DOM 中找到幻燈片時（例如，尚未呈現）

除了雜湊導覽外，還可以將當前 URL 狀態替換為新的 URL 狀態，而不是將其新增至歷程記錄中

設定為 true 以啟用透過瀏覽器歷程記錄或直接在文件位置設定雜湊值來導覽幻燈片（啟用雜湊導覽時）

啟用歷程記錄外掛程式。

變更瀏覽器 URL 時保留查詢參數。

幻燈片的 URL 金鑰

除了雜湊導覽或歷程記錄之外，還可以將目前的 URL 狀態替換為新的 URL 狀態，而不是將其新增到歷程記錄中

滑動軸頁面根目錄，當您在非根網站頁面上使用 Swiper 歷程記錄模式時，此選項很有用。例如，可以是 https://my-website.com/ 或 https://my-website.com/subpage/ 或 /subpage/

定義如何控制另一個滑動軸：逐張幻燈片（與另一個滑動軸的格線相關）或根據所有幻燈片/容器（取決於總滑動軸百分比）。

在此處傳遞另一個 Swiper 執行個體或 Swiper 執行個體陣列，這些執行個體應由這個 Swiper 控制。也接受 Swiper 元素的 CSS 選擇器字串或 Swiper 元素的 HTMLElement

設定為 true，控制將在反向方向進行

外部滑動軸容器的螢幕閱讀器訊息

要在滑動軸容器上設定的 "role" 屬性的值

用於描述外部滑動軸容器角色的螢幕閱讀器訊息

啟用 A11y

當滑動軸位於第一張幻燈片時，先前按鈕的螢幕閱讀器訊息

要在滑動軸包裝器上設定的 id 屬性的值。如果為 null，將自動產生

用於描述幻燈片元素角色的螢幕閱讀器訊息

當 Swiper 處於最後一張投影片時，螢幕閱讀器用於「下一張」按鈕的訊息

螢幕閱讀器用於「下一張」按鈕的訊息

A11y 通知的 CSS 類別名稱

螢幕閱讀器用於單個分頁圓點的訊息

螢幕閱讀器用於「上一張」按鈕的訊息

啟用滾動到已聚焦的投影片

螢幕閱讀器描述投影片元素標籤的訊息

Swiper 投影片 role 屬性的值