Swiper選項 | Swiper - v11.2.0 - Swiper 繁體中文

階層

SwiperOptions

索引

屬性

方法

onAny

屬性

可選 _emitClasses

_emitClasses: boolean

!內部啟用時將發出 "_containerClasses" 和 "_slideClass" 事件

可選 a11y

a11y: any

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

範例

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

可選 allowSlideNext

allowSlideNext: boolean

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

預設: true

可選 allowSlidePrev

allowSlidePrev: boolean

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

預設: true

可選 allowTouchMove

allowTouchMove: boolean

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

預設: true

可選 autoHeight

autoHeight: boolean

設定為 true，滑動器包裝器將使其高度適應目前活動投影片的高度

預設: false

可選 autoplay

autoplay: any

帶有自動播放參數的物件，或布林值 true 以啟用預設設定

範例

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

可選 breakpoints

breakpoints: {}

允許為不同的響應式斷點（螢幕尺寸）設定不同的參數。並非所有參數都可以在斷點中變更，僅限於那些不需要不同佈局和邏輯的參數，例如 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,
    },
  }
});

類型宣告

[width: number]: SwiperOptions

可選 breakpointsBase

breakpointsBase: any

斷點的基礎（beta）。可以是 window 或 container。如果設定為 window（預設），則斷點鍵表示視窗寬度。如果設定為 container，則斷點鍵會被視為滑動器容器寬度

預設: 'window'

可選 cardsEffect

cardsEffect: any

帶有卡片效果參數的物件

範例

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

可選 centerInsufficientSlides

centerInsufficientSlides: boolean

啟用後，如果投影片數量少於 slidesPerView，則會將投影片置中。不適用於 loop 模式和 grid.rows

預設: false

可選 centeredSlides

centeredSlides: boolean

如果為 true，則活動投影片將置中，而非總是位於左側。

預設: false

可選 centeredSlidesBounds

centeredSlidesBounds: boolean

如果為 true，則活動投影片將置中，而不會在滑動器的開頭和結尾新增間隙。需要 centeredSlides: true。不適用於 loop 或 pagination

預設: false

可選 containerModifierClass

containerModifierClass: string

可以根據不同參數新增至滑動器容器的修飾符 CSS 類別開頭

預設: 'swiper-'

可選 controller

controller: any

帶有控制器參數的物件，或布林值 true 以啟用預設設定

範例

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

可選 coverflowEffect

coverflowEffect: any

帶有 Coverflow 效果參數的物件。

範例

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

可選 createElements

createElements: boolean

啟用後，Swiper 將自動使用 swiper-wrapper 元素包裝投影片，並為導覽、分頁和捲軸建立必要的元素（如果它們已啟用（使用各自的 params 物件或布林值 true））

預設: false

可選 creativeEffect

creativeEffect: any

帶有創意效果參數的物件

範例

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],
    },
  },
});

可選 cssMode

cssMode: boolean

啟用後，它將使用現代 CSS Scroll Snap API。它不支援 Swiper 的所有功能，但在簡單配置中可能帶來更好的效能。

以下是啟用時不支援的功能

立方體效果
speed 參數可能沒有效果
所有與轉換開始/結束相關的事件（請改用 slideChange）
slidesPerGroup 的支援有限
simulateTouch 沒有效果，並且使用滑鼠「拖曳」不起作用
resistance 沒有任何效果
allowSlidePrev/Next
swipeHandler

如果您將其與其他效果（尤其是 3D 效果）一起使用，則需要使用 <div class="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>

預設

false

可選 cubeEffect

cubeEffect: any

帶有立方體效果參數的物件

範例

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

可選 direction

direction: "horizontal" | "vertical"

可以是 'horizontal' 或 'vertical'（用於垂直滑動器）。

預設: 'horizontal'

可選 edgeSwipeDetection

edgeSwipeDetection: string | boolean

啟用以釋放 Swiper 事件，以便在應用程式中進行滑動返回操作。如果設定為 'prevent'，則會阻止系統的滑動返回導航。此功能僅適用於「觸摸」事件（而非指標事件），因此它將在 iOS/Android 裝置上運作，而無法在具有指標（觸摸）事件的 Windows 裝置上運作。

預設: false

選用 edgeSwipeThreshold

edgeSwipeThreshold: number

從螢幕左邊緣開始，以像素為單位的區域，用於釋放觸摸事件以便在應用程式中進行滑動返回操作

預設: 20

選用 effect

effect: string

轉場效果。可以是 'slide'、'fade'、'cube'、'coverflow'、'flip'、'creative' 或 'cards'

預設: 'slide'

選用 enabled

enabled: boolean

Swiper 是否初始啟用。當 Swiper 被禁用時，它將隱藏所有導航元素，並且不會回應任何事件和互動

預設: true

選用 eventsPrefix

eventsPrefix: string

Swiper 元素 (Web 元件) 發出的所有 DOM 事件的事件名稱前綴

預設: swiper

選用 fadeEffect

fadeEffect: any

具有淡入淡出效果參數的物件

範例

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

選用 flipEffect

flipEffect: any

具有翻轉效果參數的物件

範例

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

選用 focusableElements

focusableElements: string

可聚焦元素的 CSS 選擇器。如果此類元素「聚焦」，則會在這些元素上停用滑動

預設: 'input, select, option, textarea, button, video, label'

選用 followFinger

followFinger: boolean

如果禁用，則滑塊僅會在您釋放時動畫，當您按住手指時它不會移動

預設: true

選用 freeMode

freeMode: any

啟用自由模式功能。具有自由模式參數的物件，或布林值 true 以使用預設設定啟用。

範例

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

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

選用 grabCursor

grabCursor: boolean

此選項可能會稍微改善桌面使用性。如果為 true，使用者在懸停在 Swiper 上時將看到「抓取」游標

預設: false

選用 grid

grid: any

具有網格參數的物件，以啟用「多行」滑塊。

範例

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

選用 hashNavigation

hashNavigation: any

啟用幻燈片的雜湊網址導覽。具有雜湊導覽參數的物件，或布林值 true 以使用預設設定啟用

範例

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

選用 height

height: null | number

Swiper 高度 (以像素為單位)。參數允許強制設定 Swiper 高度。僅當您在隱藏時初始化 Swiper，並且在 SSR 和測試環境中用於正確的 Swiper 初始化時才有用

預設: null
注意: 設定此參數會使 Swiper 不具響應性

選用 history

history: any

啟用歷史記錄推送狀態，其中每個幻燈片都有自己的網址。在此參數中，您必須指定主要的幻燈片網址，例如 "slides"，並使用 data-history 屬性指定每個幻燈片網址。

具有歷史記錄導覽參數的物件，或布林值 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>

選用 init

init: boolean

是否應在您建立實例時自動初始化 Swiper。如果禁用，則需要透過呼叫 swiper.init() 手動初始化

預設: true

選用 initialSlide

initialSlide: number

初始幻燈片的索引編號。

預設: 0

選用 injectStyles

injectStyles: string[]

將文字樣式注入陰影 DOM。僅適用於 Swiper 元素

選用 injectStylesUrls

injectStylesUrls: string[]

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

選用 keyboard

keyboard: any

啟用使用鍵盤導覽幻燈片。具有鍵盤參數的物件，或布林值 true 以使用預設設定啟用

範例

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

選用 lazyPreloadPrevNext

lazyPreloadPrevNext: number

要預先載入的下一個和上一個幻燈片的數量。僅在使用延遲載入時適用。

預設: 0

選用 lazyPreloaderClass

lazyPreloaderClass: string

延遲預載器的 CSS 類別名稱

預設: 'swiper-lazy-preloader'

選用 longSwipes

longSwipes: boolean

如果您想要禁用長滑動，請設定為 false

預設: true

選用 longSwipesMs

longSwipesMs: number

在長滑動期間觸發滑動到下一個/上一個幻燈片的最小持續時間 (以毫秒為單位)

預設: 300

選用 longSwipesRatio

longSwipesRatio: number

在長滑動期間觸發滑動到下一個/上一個幻燈片的比例

預設: 0.5

選用 loop

loop: boolean

設定為 true 以啟用連續循環模式

由於循環模式的運作方式 (它會重新排列幻燈片)，幻燈片的總數必須

大於或等於 slidesPerView + slidesPerGroup
甚至等於 slidesPerGroup (或使用 loopAddBlankSlides 參數)
甚至等於 grid.rows (或使用 loopAddBlankSlides 參數)

預設: false

選用 loopAddBlankSlides

loopAddBlankSlides: boolean

如果您使用網格或 slidesPerGroup，並且幻燈片的總數不等於 slidesPerGroup 或 grid.rows，則會自動新增空白幻燈片

預設: true

選用 loopAdditionalSlides

loopAdditionalSlides: number

允許增加循環幻燈片的數量

預設: 0

選用 loopPreventsSliding

loopPreventsSliding: boolean

如果啟用，則在滑塊在循環模式中動畫時，slideNext/Prev 將不會執行任何操作

預設: true

選用 maxBackfaceHiddenSlides

maxBackfaceHiddenSlides: number

如果幻燈片的總數小於此處指定的值，則 Swiper 將在幻燈片元素上啟用 backface-visibility: hidden，以減少 Safari 中的視覺「閃爍」。

注意: 不建議在大量幻燈片上啟用它，因為它會降低效能
預設: 10

選用 modules

modules: any[]

具有 Swiper 模組的陣列

範例

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

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

選用 mousewheel

mousewheel: any

啟用使用滑鼠滾輪導覽幻燈片。具有滑鼠滾輪參數的物件，或布林值 true 以使用預設設定啟用

範例

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

選用 navigation

navigation: any

具有導覽參數的物件，或布林值 true 以使用預設設定啟用。

範例

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

選用 nested

nested: boolean

在 Swiper 上設定為 true 以正確攔截觸摸事件。僅在與父項使用相同方向的 swiper 上使用

預設: false

可選 noSwiping

noSwiping: boolean

啟用/停用與 noSwipingClass 中指定的 class 相符的元素上的滑動操作。

預設: true

可選 noSwipingClass

noSwipingClass: string

指定 noSwiping 的元素 CSS class

預設: 'swiper-no-swiping'

可選 noSwipingSelector

noSwipingSelector: string

可取代 noSwipingClass 來指定要停用滑動操作的元素。例如，'input' 將停用所有輸入框上的滑動操作。

預設

可選 normalizeSlideIndex

normalizeSlideIndex: boolean

正規化滑動索引。

預設: true

可選 observeParents

observeParents: boolean

如果您也需要監看 Swiper 父元素的 Mutation，則設為 true。

預設: false

可選 observeSlideChildren

observeSlideChildren: boolean

如果您也需要監看 Swiper 滑動子元素的 Mutation，則設為 true。

預設: false

可選 observer

observer: boolean

設為 true 以在 Swiper 及其元素上啟用 Mutation Observer。在這種情況下，如果您更改其樣式（例如隱藏/顯示）或修改其子元素（例如新增/移除滑動），則每次都會更新（重新初始化）Swiper。

預設: false

可選 on

on: {}

註冊事件處理程式

類型宣告

可選 oneWayMovement

oneWayMovement: boolean

啟用時，無論滑動方向如何，都只會向前滑動（單向）。

預設: false

可選 pagination

pagination: any

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

範例

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

可選 parallax

parallax: any

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

範例

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

可選 passiveListeners

passiveListeners: boolean

預設情況下，盡可能使用被動事件監聽器來改善行動裝置上的滾動效能。但如果您需要使用 e.preventDefault 並且與其發生衝突，則應停用此參數。

預設: true

可選 preventClicks

preventClicks: boolean

設為 true 以防止在滑動期間意外點擊連結。

預設: true

可選 preventClicksPropagation

preventClicksPropagation: boolean

設為 true 以在滑動期間停止連結上的點擊事件傳播。

預設: true

可選 preventInteractionOnTransition

preventInteractionOnTransition: boolean

啟用時，在過渡期間不允許通過滑動或導航/分頁按鈕來更改滑動。

預設: false

可選 resistance

resistance: boolean

如果您想停用阻力邊界，則設為 false。

預設: true

可選 resistanceRatio

resistanceRatio: number

此選項允許您控制阻力比。

預設: 0.85

可選 resizeObserver

resizeObserver: boolean

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

預設: true

可選 rewind

rewind: boolean

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

預設: false
注意: 不應與 loop 模式一起使用

可選 roundLengths

roundLengths: boolean

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

預設: false

可選 runCallbacksOnInit

runCallbacksOnInit: boolean

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

預設: true

可選 scrollbar

scrollbar: any

具有滾動條參數的物件或布林值 true，以啟用預設設定。

範例

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

可選 setWrapperSize

setWrapperSize: boolean

啟用此選項，外掛程式將在 swiper 包裹器上設定寬度/高度，等於所有滑動的總大小。主要應作為不支援 flexbox 佈局的瀏覽器的相容性回退選項使用。

預設: false

可選 shortSwipes

shortSwipes: boolean

如果您想停用短滑動，則設為 false。

預設: true

可選 simulateTouch

simulateTouch: boolean

如果為 true，Swiper 將接受像觸摸事件一樣的滑鼠事件（點擊並拖動以更改滑動）。

預設: true

可選 slideActiveClass

slideActiveClass: string

目前活動滑動的 CSS class 名稱

預設: 'swiper-slide-active'
注意: 通過更改 class，您還需要更改 Swiper 的 CSS 以反映更改的 class
注意: Swiper React/Vue 元件中不支援

可選 slideBlankClass

slideBlankClass: string

循環模式新增的空白滑動的 CSS class 名稱（啟用 loopAddBlankSlides 時）

預設: 'swiper-slide-blank'
注意: Swiper React/Vue 中不支援

可選 slideClass

slideClass: string

滑動的 CSS class 名稱

預設: 'swiper-slide'
注意: 通過更改 class，您還需要更改 Swiper 的 CSS 以反映更改的 class
注意: Swiper React/Vue 元件中不支援

可選 slideFullyVisibleClass

slideFullyVisibleClass: string

完全（當整個滑動在視窗中時）可見滑動的 CSS class 名稱

預設: 'swiper-slide-fully-visible'
注意: Swiper React/Vue 中不支援

可選 slideNextClass

slideNextClass: string

目前活動滑動之後的滑動的 CSS class 名稱

預設: 'swiper-slide-next'
注意: 通過更改 class，您還需要更改 Swiper 的 CSS 以反映更改的 class
注意: Swiper React/Vue 中不支援

可選 slidePrevClass

slidePrevClass: string

目前活動滑動之前的滑動的 CSS class 名稱

預設: 'swiper-slide-prev'
注意: 通過更改 class，您還需要更改 Swiper 的 CSS 以反映更改的 class
注意: Swiper React/Vue 中不支援

可選 slideToClickedSlide

slideToClickedSlide: boolean

設為 true 並且點擊任何滑動將會轉換到該滑動

預設: false

可選 slideVisibleClass

slideVisibleClass: string

目前/部分可見滑動的 CSS class 名稱

預設: 'swiper-slide-visible'
注意: 通過更改 class，您還需要更改 Swiper 的 CSS 以反映更改的 class
注意: Swiper React/Vue 中不支援

可選 slidesOffsetAfter

slidesOffsetAfter: number

在容器末尾（所有滑動之後）新增（以 px 為單位）額外的滑動偏移。

預設: 0

可選 slidesOffsetBefore

slidesOffsetBefore: number

在容器開頭（所有滑動之前）新增（以 px 為單位）額外的滑動偏移。

預設: 0

可選 slidesPerGroup

slidesPerGroup: number

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

預設: 1

可選 slidesPerGroupAuto

slidesPerGroupAuto: boolean

此參數僅適用於 slidesPerView: 'auto' 和 slidesPerGroup: 1 的情況。啟用時，它會在呼叫 .slideNext() & .slidePrev() 方法、點擊導覽「按鈕」以及自動播放時，跳過所有可視的幻燈片。

預設: false

可選 slidesPerGroupSkip

slidesPerGroupSkip: number

此參數的運作方式如下：如果 slidesPerGroupSkip 等於 0 (預設值)，則不會將幻燈片排除在分組之外，並且最終行為與未進行此變更時相同。

如果 slidesPerGroupSkip 等於或大於 1，則前 X 張幻燈片會被視為單獨的群組，而後續所有幻燈片則會按照 slidesPerGroup 值進行分組。

預設: 0

可選 slidesPerView

slidesPerView: number | "auto"

每個視圖中的幻燈片數量 (在滑動器的容器中同時可見的幻燈片數量)。

注意: slidesPerView: 'auto' 目前與多行模式不相容，當 grid.rows > 1 時。
預設: 1

可選 spaceBetween

spaceBetween: string | number

幻燈片之間的距離 (以像素為單位)。

預設: 0
注意: 如果您使用 "margin" CSS 屬性來設定放入 Swiper 中的元素，並在其中傳入 "spaceBetween"，則導覽可能無法正常運作。

可選 speed

speed: number

幻燈片之間轉換的持續時間 (以毫秒為單位)

預設: 300

可選 swipeHandler

swipeHandler: any

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

預設: null

可選 swiperElementNodeName

swiperElementNodeName: string

滑動器元素節點名稱；用於偵測 Web Component 渲染

預設: 'SWIPER-CONTAINER'

可選 threshold

threshold: number

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

預設: 5

可選 thumbs

thumbs: any

帶有縮圖元件參數的物件

範例

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

可選 touchAngle

touchAngle: number

觸發觸摸移動的允許角度 (以度為單位)

預設: 45

可選 touchEventsTarget

touchEventsTarget: "container" | "wrapper"

用於監聽觸摸事件的目標元素。可以是 'container' (監聽滑動器上的觸摸事件) 或 'wrapper' (監聽滑動器包裝器上的觸摸事件)

預設: 'wrapper'

可選 touchMoveStopPropagation

touchMoveStopPropagation: boolean

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

預設: false

可選 touchRatio

touchRatio: number

觸摸比例

預設: 1

可選 touchReleaseOnEdges

touchReleaseOnEdges: boolean

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

預設: false

可選 touchStartForcePreventDefault

touchStartForcePreventDefault: boolean

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

預設: false

可選 touchStartPreventDefault

touchStartPreventDefault: boolean

如果禁用，則不會預防 pointerdown 事件

預設: true

可選 uniqueNavElements

uniqueNavElements: boolean

如果啟用 (預設情況下)，且導覽元素的參數以字串形式傳遞 (例如 ".pagination")，則 Swiper 會先在子元素中尋找此類元素。適用於分頁、上一個/下一個按鈕和捲軸元素

預設: true

可選 updateOnWindowResize

updateOnWindowResize: boolean

Swiper 會在視窗大小調整 (orientationchange) 時重新計算幻燈片的位置

預設: true

可選 url

url: null | string

在伺服器端渲染並啟用歷史記錄時，必須用於偵測活動幻燈片

預設: null

可選 userAgent

userAgent: null | string

userAgent 字串。在伺服器端渲染時，必須用於瀏覽器/裝置偵測

預設: null

可選 virtual

virtual: any

啟用虛擬幻燈片功能。帶有虛擬幻燈片參數的物件，或布林值 true，以使用預設設定啟用。

範例

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

可選 virtualTranslate

virtualTranslate: boolean

啟用此選項，滑動器的運作方式將與平常相同，但不會移動，並且不會設定包裝器上的真實轉換值。當您可能需要建立自訂幻燈片轉換時很有用

預設: false

可選 watchOverflow

watchOverflow: boolean

啟用後，如果沒有足夠的幻燈片可供滑動，Swiper 將會被停用並隱藏導覽按鈕。

預設: true

可選 watchSlidesProgress

watchSlidesProgress: boolean

啟用此功能可計算每個幻燈片的進度和可見性 (可視區域中的幻燈片將具有額外的 visible 類別)

預設: false

可選 width

width: null | number

滑動器寬度 (以像素為單位)。此參數允許強制設定滑動器寬度。僅當您在隱藏狀態下、SSR 和測試環境中初始化滑動器時，此參數才有用，以確保正確初始化滑動器

預設: null
注意: 設定此參數會使 Swiper 不具響應性

可選 wrapperClass

wrapperClass: string

幻燈片包裝器的 CSS 類別名稱

預設: 'swiper-wrapper'
注意: 通過更改 class，您還需要更改 Swiper 的 CSS 以反映更改的 class
注意: Swiper React/Vue 中不支援

可選 zoom

zoom: any

啟用縮放功能。帶有縮放參數的物件，或布林值 true，以使用預設設定啟用

範例

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

方法

可選 onAny

onAny(handler: (eventName: string, ...args: any[]) => void): void

- 定義於 swiper/types/swiper-options.d.ts:265
新增將在所有事件上觸發的事件監聽器
範例
```
const swiper = new Swiper('.swiper', {
   onAny(eventName, ...args) {
     console.log('Event: ', eventName);
     console.log('Event data: ', args);
   }
 });
```
參數
- handler: (eventName: string, ...args: any[]) => void
  - - (eventName: string, ...args: any[]): void
    - 參數
      - eventName: string
      - 其餘 ...args: any[]
      回傳 void
回傳 void

階層

索引

屬性

方法

屬性

可選 _emitClasses

可選 a11y

可選 allowSlideNext

可選 allowSlidePrev

可選 allowTouchMove

可選 autoHeight

可選 autoplay

可選 breakpoints

類型宣告

[width: number]: SwiperOptions

可選 breakpointsBase

可選 cardsEffect

可選 centerInsufficientSlides

可選 centeredSlides

可選 centeredSlidesBounds

可選 containerModifierClass

可選 controller

可選 coverflowEffect

可選 createElements

可選 creativeEffect

可選 cssMode

可選 cubeEffect

可選 direction

可選 edgeSwipeDetection

選用 edgeSwipeThreshold

選用 effect

選用 enabled

選用 eventsPrefix

選用 fadeEffect

選用 flipEffect

選用 focusableElements

選用 followFinger

選用 freeMode

選用 grabCursor

選用 grid

選用 hashNavigation

選用 height

選用 history

選用 init

選用 initialSlide

選用 injectStyles

選用 injectStylesUrls

選用 keyboard

選用 lazyPreloadPrevNext

選用 lazyPreloaderClass

選用 longSwipes

選用 longSwipesMs

選用 longSwipesRatio

選用 loop

選用 loopAddBlankSlides

選用 loopAdditionalSlides

選用 loopPreventsSliding

選用 maxBackfaceHiddenSlides

選用 modules

選用 mousewheel

選用 navigation

選用 nested

可選 noSwiping

可選 noSwipingClass

可選 noSwipingSelector

可選 normalizeSlideIndex

可選 observeParents

可選 observeSlideChildren

可選 observer

可選 on

類型宣告

可選 oneWayMovement

可選 pagination

可選 parallax

可選 passiveListeners

可選 preventClicks

可選 preventClicksPropagation

可選 preventInteractionOnTransition

可選 resistance

可選 resistanceRatio