选项
所有
  • 公共
  • 公共/受保护
  • 所有
菜单

类 默认

层级

实现

由以下实现

索引

构造函数

属性

方法

构造函数

构造函数

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

  • 构造一个新的 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 元素

enabled

enabled: boolean

如果 Swiper 已启用，则为 true，否则为 false

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: 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

包装器转换的当前值

virtual

virtual: any

width

width: number

容器宽度

wrapperEl

wrapperEl: HTMLElement

包装器 HTML 元素

zoom

zoom: any

静态 默认

defaults: any

Swiper 默认选项

静态 extendedDefaults

extendedDefaults: any

包含全局 Swiper 扩展选项的对象

方法

attachEvents

  • attachEvents(): void

  • 重新附加所有事件监听器

    返回 void

changeDirection

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

  • 更改滑块方向，从水平到垂直，或反之。

    参数

    • 可选 direction: "horizontal" | "vertical"

      新方向。如果未指定，则会自动更改为相反方向

    • 可选 needUpdate: boolean

      将调用 swiper.update()。默认为 true

    返回 void

changeLanguageDirection

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

  • 更改滑块语言

    参数

    • direction: "rtl" | "ltr"

      新方向。应为 rtl 或 ltr

    返回 void

destroy

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

  • 销毁滑块实例并分离所有事件监听器

    参数

    • 可选 deleteInstance: boolean

      将其设置为 false（默认为 true）以不删除 Swiper 实例

    • 可选 cleanStyles: boolean

      将其设置为 true（默认为 true），所有自定义样式将从幻灯片、包装器和容器中移除。如果您需要销毁 Swiper 并以新选项或不同方向重新初始化，则此功能很有用

    返回 void

detachEvents

  • detachEvents(): void

  • 分离所有事件监听器

    返回 void

disable

  • disable(): void

  • 禁用 Swiper（如果已启用）。当 Swiper 禁用时，它将隐藏所有导航元素，并且不会响应任何事件和交互

    返回 void

emit

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

  • 在实例上触发事件

    类型参数

    • E: string | number | symbol

    参数

    • event: E
    • 剩余参数 ...args: any[]

    返回 void

enable

  • enable(): void

  • 启用 Swiper（如果已禁用）

    返回 void

getBreakpoint

  • getBreakpoint(breakpoints: any): string

  • !内部

    参数

    • breakpoints: any

    返回 string

getTranslate

  • getTranslate(): any

  • 获取 swiper 包装器 css3 transform translate 的当前值

    返回 any

init

  • 初始化滑块

    参数

    • 可选 el: HTMLElement

    返回 default

isHorizontal

  • isHorizontal(): boolean

  • !内部

    返回 boolean

loopCreate

  • loopCreate(): void

  • !内部

    返回 void

loopDestroy

  • loopDestroy(): void

  • !内部

    返回 void

maxTranslate

  • maxTranslate(): number

  • 获取当前最大转换值

    返回 number

minTranslate

  • minTranslate(): number

  • 获取当前最小转换值

    返回 number

off

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

  • 移除事件处理程序

    类型参数

    • E: string | number | symbol

    参数

    • event: E
    • handler: any

    返回 void

  • 移除指定事件的所有处理程序

    类型参数

    • E: string | number | symbol

    参数

    • event: E

    返回 void

offAny

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

  • 移除在所有事件上触发的事件监听器

    参数

    • 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

  • 添加事件处理程序

    类型参数

    • E: string | number | symbol

    参数

    • event: E
    • handler: any

    返回 void

onAny

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

  • 添加将在所有事件上触发的事件监听器

    参数

    • 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

  • 添加事件处理程序，该处理程序将在触发后移除

    类型参数

    • E: string | number | symbol

    参数

    • event: E
    • handler: any

    返回 void

setBreakpoint

  • setBreakpoint(): void

  • !内部

    返回 void

setGrabCursor

  • setGrabCursor(): void

  • 设置抓取光标

    返回 void

setProgress

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

  • 设置 Swiper 转换进度（从 0 到 1）。其中 0 是第一张幻灯片的初始位置（偏移），1 是最后一张幻灯片的最大位置（偏移）

    参数

    • progress: number

      Swiper 转换进度（从 0 到 1）。

    • 可选 speed: number

      过渡持续时间（毫秒）。

    返回 void

setTranslate

  • setTranslate(translate: any): void

  • 为 swiper 包装器设置自定义 css3 transform 的 translate 值

    参数

    • translate: any

    返回 void

slideNext

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

  • 运行到下一张幻灯片的过渡。

    参数

    • 可选 speed: number

      过渡持续时间（毫秒）。

    • 可选 runCallbacks: boolean

      将其设置为 false（默认为 true），过渡将不会产生过渡事件。

    返回 boolean

slidePrev

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

  • 运行到上一张幻灯片的过渡。

    参数

    • 可选 speed: number

      过渡持续时间（毫秒）。

    • 可选 runCallbacks: boolean

      将其设置为 false（默认为 true），过渡将不会产生过渡事件。

    返回 boolean

slideReset

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

  • 将 swiper 位置重置到当前活动幻灯片，持续时间等于“speed”参数。

    参数

    • 可选 speed: number

      过渡持续时间（毫秒）。

    • 可选 runCallbacks: boolean

      将其设置为 false（默认为 true），过渡将不会产生过渡事件。

    返回 boolean

slideTo

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

  • 运行到索引号等于“index”参数的幻灯片的过渡，持续时间等于“speed”参数。

    参数

    • index: number

      幻灯片的索引号。

    • 可选 speed: number

      过渡持续时间（毫秒）。

    • 可选 runCallbacks: boolean

      将其设置为 false（默认为 true），过渡将不会产生过渡事件。

    返回 boolean

slideToClosest

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

  • 将 swiper 位置重置到最近的幻灯片/捕捉点，持续时间等于“speed”参数。

    参数

    • 可选 speed: number

      过渡持续时间（毫秒）。

    • 可选 runCallbacks: boolean

      将其设置为 false（默认为 true），过渡将不会产生过渡事件。

    返回 boolean

slideToLoop

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

  • 与 .slideTo 作用相同，但适用于启用循环的情况。因此，此方法将滑动到真实索引与传递的索引匹配的幻灯片

    参数

    • index: number

      幻灯片的索引号。

    • 可选 speed: number

      过渡持续时间（毫秒）。

    • 可选 runCallbacks: boolean

      将其设置为 false（默认为 true），过渡将不会产生过渡事件。

    返回 default

slidesPerViewDynamic

  • slidesPerViewDynamic(): number

  • 动态计算每视图幻灯片数量，仅当 slidesPerView 设置为 auto 时才有用

    返回 number

translateTo

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

  • 为 swiper 包装器动画自定义 css3 transform 的 translate 值

    参数

    • translate: number

      转换值（像素）

    • speed: number

      过渡持续时间（毫秒）

    • 可选 runCallbacks: boolean

      将其设置为 false（默认为 true），过渡将不会产生过渡事件

    • 可选 translateBounds: boolean

      将其设置为 false（默认为 true），转换值可以超出最小和最大转换范围

    返回 any

unsetGrabCursor

  • unsetGrabCursor(): void

  • 取消设置抓取光标

    返回 void

更新

  • update(): void

  • 在手动添加/移除幻灯片，或隐藏/显示幻灯片，或对 Swiper 进行任何自定义 DOM 修改后，应调用此方法。此方法还包括对以下方法的子调用，您可以单独使用这些方法

    返回 void

updateAutoHeight

  • updateAutoHeight(speed?: number): void

  • 强制 swiper 更新其高度（当 autoHeight 启用时），持续时间等于“speed”参数

    参数

    • 可选 speed: number

      过渡持续时间（毫秒）。

    返回 void

updateProgress

  • updateProgress(): void

  • 重新计算 swiper 进度

    返回 void

updateSize

  • updateSize(): void

  • 重新计算 swiper 容器的大小

    返回 void

updateSlides

  • updateSlides(): void

  • 重新计算幻灯片数量及其偏移量。在您用 JavaScript 添加/移除幻灯片后很有用

    返回 void

updateSlidesClasses

  • updateSlidesClasses(): void

  • 更新幻灯片和项目符号上的 active/prev/next 类

    返回 void

静态 extendDefaults

  • extendDefaults(options: any): void

  • 扩展全局 Swiper 默认值

    参数

    • options: any

    返回 void

静态 use

  • use(modules: any[]): void

  • 在运行时在 Swiper 上安装模块。

    参数

    • modules: any[]

    返回 void

使用 TypeDoc 生成