預設 | Swiper - v11.2.0 - Swiper 繁體中文

階層

SwiperClass<SwiperClass>
SwiperClass
- 預設

實作

預設

由以下實作

預設

索引

建構函式

constructor

屬性

方法

建構函式

constructor

new default(container: any, options?: any): default

繼承自 SwiperClass<SwiperEvents>.constructor
- 定義於 swiper/types/swiper-class.d.ts:495
建構一個新的 Swiper 實例。

參數
- container: any
  
  Swiper 應用於何處。
- 可選 options: any
  
  實例選項。
回傳 default

屬性

a11y

a11y: any

activeIndex

activeIndex: number

目前活動幻燈片的索引編號

注意: 請注意，在循環模式中，活動索引值將始終偏移循環幻燈片的數量

allowSlideNext

allowSlideNext: boolean

透過將 false / true 指派給此屬性，來停用/啟用滑動至下一個幻燈片的能力

allowSlidePrev

allowSlidePrev: boolean

透過將 false / true 指派給此屬性，來停用/啟用滑動至上一個幻燈片的能力

allowTouchMove

allowTouchMove: boolean

透過將 false / true 指派給此屬性，停用/啟用透過滑鼠抓取或手指觸摸（在觸控螢幕上）來移動滑桿的能力

animating

animating: boolean

如果 swiper 正在轉場，則為 true

autoplay

autoplay: any

cardsEffect

cardsEffect: any

clickedIndex

clickedIndex: number

上次點擊幻燈片的索引編號

clickedSlide

clickedSlide: HTMLElement

指向上次點擊幻燈片的連結 (HTMLElement)

controller

controller: any

coverflowEffect

coverflowEffect: any

creativeEffect

creativeEffect: any

cubeEffect

cubeEffect: any

currentBreakpoint

currentBreakpoint: any

!內部

destroyed

destroyed: boolean

!內部

el

el: HTMLElement

滑桿容器 HTML 元素

fadeEffect

fadeEffect: any

flipEffect

flipEffect: any

freeMode

freeMode: any

hashNavigation

hashNavigation: any

height

height: number

容器的高度

history

history: any

isBeginning

isBeginning: boolean

如果滑桿位於最「左」/「頂」位置，則為 true

isEnd

isEnd: boolean

如果滑桿位於最「右」/「底」位置，則為 true

isLocked

isLocked: boolean

如果滑桿被「鎖定」（藉由 watchOverflow），並且滑桿無法移動，則為 true，例如當幻燈片數量少於每個視圖的幻燈片數量時

keyboard

keyboard: any

loopedSlides

loopedSlides: null | number

!內部

modules

modules: any[]

!內部

mousewheel

mousewheel: any

navigation

navigation: any

originalParams

originalParams: any

包含原始初始化參數的物件

pagination

pagination: any

parallax

parallax: any

params

params: any

包含已傳遞初始化參數的物件

previousIndex

previousIndex: number

先前活動幻燈片的索引編號

progress

progress: number

封裝器轉換的目前進度（從 0 到 1）

realIndex

realIndex: number

考量循環模式中重新排列的幻燈片，目前活動幻燈片的索引編號

rtlTranslate

rtlTranslate: boolean

!內部

scrollbar

scrollbar: any

slides

slides: HTMLElement[]

幻燈片 HTML 元素的陣列。若要取得特定幻燈片 HTMLElement，請使用 swiper.slides[1]

slidesEl

slidesEl: HTMLElement

封裝器 HTML 元素

slidesGrid

slidesGrid: number[]

幻燈片網格

slidesSizesGrid

slidesSizesGrid: number[]

幻燈片寬度的陣列

snapGrid

snapGrid: number[]

幻燈片貼齊網格

snapIndex

snapIndex: number

snapGrid 中目前貼齊的索引編號

swipeDirection

swipeDirection: "prev" | "next"

滑動方向

thumbs

thumbs: any

touches

touches: { currentX: number; currentY: number; diff: number; startX: number; startY: number }

包含以下觸控事件屬性的物件

swiper.touches.startX
swiper.touches.startY
swiper.touches.currentX
swiper.touches.currentY
swiper.touches.diff

類型宣告

currentX: number
currentY: number
diff: number
startX: number
startY: number

translate

translate: number

Wrapper 位移的目前值

virtual

virtual: any

width

width: number

容器寬度

wrapperEl

wrapperEl: HTMLElement

封裝器 HTML 元素

zoom

zoom: any

靜態 defaults

defaults: any

Swiper 預設選項

靜態 extendedDefaults

extendedDefaults: any

包含全域 Swiper 擴充選項的物件

方法

attachEvents

attachEvents(): void

- 定義於 swiper/types/swiper-class.d.ts:351
再次附加所有事件監聽器

返回 void

changeDirection

changeDirection(direction?: "horizontal" | "vertical", needUpdate?: boolean): void

- 定義於 swiper/types/swiper-class.d.ts:334
將滑動方向從水平變更為垂直，反之亦然。

參數
- 可選 direction: "horizontal" | "vertical"
  
  新方向。若未指定，則會自動變更為相反方向
- 可選 needUpdate: boolean
  
  是否呼叫 swiper.update()。預設為 true
返回 void

changeLanguageDirection

changeLanguageDirection(direction: "rtl" | "ltr"): void

- 定義於 swiper/types/swiper-class.d.ts:341
變更滑動器的語言

參數
- direction: "rtl" | "ltr"
  
  新方向。應為 rtl 或 ltr
返回 void

destroy

destroy(deleteInstance?: boolean, cleanStyles?: boolean): void

- 定義於 swiper/types/swiper-class.d.ts:375
摧毀滑動器實例並分離所有事件監聽器

參數
- 可選 deleteInstance: boolean
  
  設為 false (預設為 true) 可避免刪除 Swiper 實例
- 可選 cleanStyles: boolean
  
  設為 true (預設為 true) 所有自訂樣式會從幻燈片、wrapper 和容器中移除。當您需要摧毀 Swiper 並使用新選項或不同方向重新初始化時很有用
返回 void

detachEvents

detachEvents(): void

- 定義於 swiper/types/swiper-class.d.ts:346
分離所有事件監聽器

返回 void

disable

disable(): void

- 定義於 swiper/types/swiper-class.d.ts:210
停用 Swiper (如果已啟用)。當 Swiper 停用時，它會隱藏所有導覽元素，並且不會回應任何事件和互動

返回 void

emit

emit<E>(event: E, ...args: any[]): void

繼承自 SwiperClass.emit
- 定義於 swiper/types/swiper-class.d.ts:38
在實例上觸發事件

類型參數
- E: string | number | symbol
參數
- event: E
- 其餘 ...args: any[]
返回 void

enable

enable(): void

- 定義於 swiper/types/swiper-class.d.ts:216
啟用 Swiper (如果已停用)

返回 void

getBreakpoint

getBreakpoint(breakpoints: any): string

- 定義於 swiper/types/swiper-class.d.ts:441
!內部

參數
- breakpoints: any
返回 string

getTranslate

getTranslate(): any

- 定義於 swiper/types/swiper-class.d.ts:385
取得滑動器 wrapper CSS3 轉換位移的目前值

返回 any

init

init(el?: HTMLElement): default

- 定義於 swiper/types/swiper-class.d.ts:366
初始化滑動器

參數
- 可選 el: HTMLElement
回傳 default

isHorizontal

isHorizontal(): boolean

- 定義於 swiper/types/swiper-class.d.ts:436
!內部

返回 boolean

loopCreate

loopCreate(): void

- 定義於 swiper/types/swiper-class.d.ts:356
!內部

返回 void

loopDestroy

loopDestroy(): void

- 定義於 swiper/types/swiper-class.d.ts:361
!內部

返回 void

maxTranslate

maxTranslate(): number

- 定義於 swiper/types/swiper-class.d.ts:411
取得目前最大位移值

返回 number

minTranslate

minTranslate(): number

- 定義於 swiper/types/swiper-class.d.ts:406
取得目前最小位移值

返回 number

off

off<E>(event: E, handler: any): void
off<E>(event: E): void

繼承自 SwiperClass.off
- 定義於 swiper/types/swiper-class.d.ts:34
移除事件處理器

類型參數
- E: string | number | symbol
參數
- event: E
- handler: any
返回 void
繼承自 SwiperClass.off
- 定義於 swiper/types/swiper-class.d.ts:36
移除指定事件的所有處理器

類型參數
- E: string | number | symbol
參數
- event: E
返回 void

offAny

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

- 定義於 swiper/types/swiper-class.d.ts:431
移除將在所有事件上觸發的事件監聽器

參數
- handler: (eventName: string, ...args: any[]) => void
  - - (eventName: string, ...args: any[]): void
    - 參數
      - eventName: string
      - 其餘 ...args: any[]
      返回 void
返回 void

on

on<E>(event: E, handler: any): void

繼承自 SwiperClass.on
- 定義於 swiper/types/swiper-class.d.ts:30
新增事件處理器

類型參數
- E: string | number | symbol
參數
- event: E
- handler: any
返回 void

onAny

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

- 定義於 swiper/types/swiper-class.d.ts:426
新增將在所有事件上觸發的事件監聽器

參數
- handler: (eventName: string, ...args: any[]) => void
  - - (eventName: string, ...args: any[]): void
    - 參數
      - eventName: string
      - 其餘 ...args: any[]
      返回 void
返回 void

once

once<E>(event: E, handler: any): void

繼承自 SwiperClass.once
- 定義於 swiper/types/swiper-class.d.ts:32
新增在觸發後會移除的事件處理器

類型參數
- E: string | number | symbol
參數
- event: E
- handler: any
返回 void

setBreakpoint

setBreakpoint(): void

- 定義於 swiper/types/swiper-class.d.ts:446
!內部

返回 void

setGrabCursor

setGrabCursor(): void

- 定義於 swiper/types/swiper-class.d.ts:421
設定抓取游標

返回 void

setProgress

setProgress(progress: number, speed?: number): void

- 定義於 swiper/types/swiper-class.d.ts:224
設定 Swiper 的平移進度（從 0 到 1）。其中 0 代表第一張投影片的初始位置（偏移量），1 代表最後一張投影片的最大位置（偏移量）

參數
- progress: number
  
  Swiper 的平移進度（從 0 到 1）。
- 選填 speed: number
  
  過渡持續時間（以毫秒為單位）。
返回 void

setTranslate

setTranslate(translate: any): void

- 定義於 swiper/types/swiper-class.d.ts:380
設定 swiper wrapper 的自訂 css3 transform 平移值

參數
- translate: any
返回 void

slideNext

slideNext(speed?: number, runCallbacks?: boolean): boolean

- 定義於 swiper/types/swiper-class.d.ts:233
執行過渡到下一張投影片。

參數
- 選填 speed: number
  
  過渡持續時間（以毫秒為單位）。
- 選填 runCallbacks: boolean
  
  設定為 false（預設為 true），則過渡不會產生過渡事件。
返回 boolean

slidePrev

slidePrev(speed?: number, runCallbacks?: boolean): boolean

- 定義於 swiper/types/swiper-class.d.ts:242
執行過渡到上一張投影片。

參數
- 選填 speed: number
  
  過渡持續時間（以毫秒為單位）。
- 選填 runCallbacks: boolean
  
  設定為 false（預設為 true），則過渡不會產生過渡事件。
返回 boolean

slideReset

slideReset(speed?: number, runCallbacks?: boolean): boolean

- 定義於 swiper/types/swiper-class.d.ts:274
將 swiper 位置重置為目前活動的投影片，持續時間等於 'speed' 參數。

參數
- 選填 speed: number
  
  過渡持續時間（以毫秒為單位）。
- 選填 runCallbacks: boolean
  
  設定為 false（預設為 true），則過渡不會產生過渡事件。
返回 boolean

slideTo

slideTo(index: number, speed?: number, runCallbacks?: boolean): boolean

- 定義於 swiper/types/swiper-class.d.ts:253
執行過渡到索引號等於 'index' 參數的投影片，持續時間等於 'speed' 參數。

參數
- index: number
  
  投影片的索引號。
- 選填 speed: number
  
  過渡持續時間（以毫秒為單位）。
- 選填 runCallbacks: boolean
  
  設定為 false（預設為 true），則過渡不會產生過渡事件。
返回 boolean

slideToClosest

slideToClosest(speed?: number, runCallbacks?: boolean): boolean

- 定義於 swiper/types/swiper-class.d.ts:283
將 swiper 位置重置為最近的投影片/捕捉點，持續時間等於 'speed' 參數。

參數
- 選填 speed: number
  
  過渡持續時間（以毫秒為單位）。
- 選填 runCallbacks: boolean
  
  設定為 false（預設為 true），則過渡不會產生過渡事件。
返回 boolean

slideToLoop

slideToLoop(index: number, speed?: number, runCallbacks?: boolean): default

- 定義於 swiper/types/swiper-class.d.ts:264
與 .slideTo 執行相同的操作，但適用於啟用循環的情況。因此，此方法會滑動到與傳遞的索引相符的 realIndex 的投影片

參數
- index: number
  
  投影片的索引號。
- 選填 speed: number
  
  過渡持續時間（以毫秒為單位）。
- 選填 runCallbacks: boolean
  
  設定為 false（預設為 true），則過渡不會產生過渡事件。
回傳 default

slidesPerViewDynamic

slidesPerViewDynamic(): number

- 定義於 swiper/types/swiper-class.d.ts:289
取得動態計算的每視窗投影片數量，僅在 slidesPerView 設定為 auto 時有用

返回 number

translateTo

translateTo(translate: number, speed: number, runCallbacks?: boolean, translateBounds?: boolean): any

- 定義於 swiper/types/swiper-class.d.ts:396
為 swiper wrapper 的自訂 css3 transform 平移值設定動畫

參數
- translate: number
  
  平移值（以像素為單位）
- speed: number
  
  過渡持續時間（以毫秒為單位）
- 選填 runCallbacks: boolean
  
  設定為 false（預設為 true），則過渡不會產生過渡事件
- 選填 translateBounds: boolean
  
  設定為 false（預設為 true），則過渡值可以超出最小和最大平移範圍
返回 any

unsetGrabCursor

unsetGrabCursor(): void

- 定義於 swiper/types/swiper-class.d.ts:416
取消設定抓取游標

返回 void

update

update(): void

- 定義於 swiper/types/swiper-class.d.ts:306
在您手動新增/移除投影片，或在您隱藏/顯示投影片，或使用 Swiper 執行任何自訂 DOM 修改後，應該呼叫此方法。此方法還包含下列子方法的子呼叫，您可以個別使用這些方法

返回 void

updateAutoHeight

updateAutoHeight(speed?: number): void

- 定義於 swiper/types/swiper-class.d.ts:297
強制 swiper 更新其高度（在啟用 autoHeight 時），持續時間等於 'speed' 參數

參數
- 選填 speed: number
  
  過渡持續時間（以毫秒為單位）。
返回 void

updateProgress

updateProgress(): void

- 定義於 swiper/types/swiper-class.d.ts:321
重新計算 swiper 進度

返回 void

updateSize

updateSize(): void

- 定義於 swiper/types/swiper-class.d.ts:311
重新計算 swiper 容器的大小

返回 void

updateSlides

updateSlides(): void

- 定義於 swiper/types/swiper-class.d.ts:316
重新計算投影片的數量及其偏移量。在您使用 JavaScript 新增/移除投影片後很有用

返回 void

updateSlidesClasses

updateSlidesClasses(): void

- 定義於 swiper/types/swiper-class.d.ts:326
更新投影片和圓點上的 active/prev/next 類別

返回 void

靜態 extendDefaults

extendDefaults(options: any): void

- 定義於 swiper/types/swiper-class.d.ts:509
擴充全域 Swiper 預設值

參數
- options: any
返回 void

靜態 use

use(modules: any[]): void

- 定義於 swiper/types/swiper-class.d.ts:499
在執行階段於 Swiper 上安裝模組。

參數
- modules: any[]
返回 void

階層

實作

由以下實作

索引

建構函式

屬性

方法

建構函式

constructor

參數

container: any

可選 options: any

回傳 default

屬性

a11y

activeIndex

allowSlideNext

allowSlidePrev

allowTouchMove

animating

autoplay

cardsEffect

clickedIndex

clickedSlide

controller

coverflowEffect

creativeEffect

cubeEffect

currentBreakpoint

destroyed

el

fadeEffect

flipEffect

freeMode

hashNavigation

height

history

isBeginning

isEnd

isLocked

keyboard

loopedSlides

modules

mousewheel

navigation

originalParams

pagination

parallax

params

previousIndex

progress

realIndex

rtlTranslate

scrollbar

slides

slidesEl

slidesGrid

slidesSizesGrid

snapGrid

snapIndex

swipeDirection

thumbs

touches

類型宣告

currentX: number

currentY: number

diff: number

startX: number

startY: number

translate

virtual

width

wrapperEl

zoom

靜態 defaults

靜態 extendedDefaults

方法

attachEvents

返回 void

changeDirection