选项
全部
  • 公开
  • 公开/受保护
  • 全部
菜单

类 默认

层级

实现

由以下实现

索引

构造函数

属性

方法

构造函数

构造函数

  • 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 元素

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

滑块包裹器当前位移值

virtual

virtual: any

width

width: number

容器宽度

wrapperEl

wrapperEl: HTMLElement

包装器 HTML 元素

zoom

zoom: any

静态 defaults

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

  • 获取滑块包裹器 CSS3 转换 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 wrapper 设置自定义 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 wrapper 动画自定义 CSS3 transform 的 translate 值

    参数

    • translate: number

      平移值（以像素为单位）

    • speed: number

      过渡持续时间（以毫秒为单位）

    • 可选 runCallbacks: boolean

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

    • 可选 translateBounds: boolean

      将其设置为 false（默认情况下为 true），过渡值可以超出最小和最大平移范围

    返回 any

unsetGrabCursor

  • unsetGrabCursor(): void

  • 取消设置抓取光标

    返回 void

update

  • 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

  • 更新幻灯片和指示点的活动/上一个/下一个类

    返回 void

静态 extendDefaults

  • extendDefaults(options: any): void

  • 扩展全局 Swiper 默认值

    参数

    • options: any

    返回 void

静态 use

  • use(modules: any[]): void

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

    参数

    • modules: any[]

    返回 void

使用 TypeDoc 生成