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

层级

  • SwiperOptions

索引

属性

方法

属性

可选 _emitClasses

_emitClasses: boolean

!内部 当启用时将触发 "_containerClasses" 和 "_slideClass" 事件

可选 a11y

a11y: any

包含辅助功能参数的对象,或者布尔值 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: {}

允许为不同的响应式断点(屏幕尺寸)设置不同的参数。并非所有参数都可以在断点中更改,只有那些不需要不同布局和逻辑的参数,例如 slidesPerViewslidesPerGroupspaceBetweengrid.rows。像 loopeffect 这样的参数将不起作用

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

类型声明

可选 breakpointsBase

breakpointsBase: any

断点的基础(测试版)。可以是 windowcontainer。如果设置为 window(默认),则断点键表示窗口宽度。如果设置为 container,则断点键视为 swiper 容器宽度

默认值

'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。不适用于 looppagination

默认值

false

可选 containerModifierClass

containerModifierClass: string

根据不同参数可添加到 swiper 容器的修饰符 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 元素包裹幻灯片,并为导航、分页和滚动条创建所需的元素(如果它们已启用(通过其各自的参数对象或布尔值 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 滚动捕捉 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''fade''cube''coverflow''flip''creative''cards'

默认值

'slide'

可选 enabled

enabled: boolean

Swiper 最初是否启用。当 Swiper 被禁用时,它将隐藏所有导航元素,并且不会响应任何事件和交互

默认值

true

可选 eventsPrefix

eventsPrefix: string

Swiper Element(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

启用哈希 URL 导航功能。包含哈希导航参数的对象,或者布尔值 true 以启用默认设置

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

可选 height

height: null | number

Swiper 高度(以像素为单位)。该参数允许强制设置 Swiper 高度。仅当您在隐藏状态下初始化 Swiper 并在 SSR 和测试环境中进行正确 Swiper 初始化时才有用

默认值

null

注意

设置此参数将使 Swiper 不再具有响应性

可选 history

history: any

启用历史记录 push state,每个幻灯片都将拥有自己的 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>

可选 init

init: boolean

当您创建实例时,Swiper 是否应自动初始化。如果禁用,则需要通过调用 swiper.init() 手动初始化

默认值

true

可选 initialSlide

initialSlide: number

初始幻灯片的索引号。

默认值

0

可选 injectStyles

injectStyles: string[]

将文本样式注入到 shadow DOM 中。仅用于 Swiper 元素

可选 injectStylesUrls

injectStylesUrls: string[]

将样式 <link> 注入到 shadow 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 且幻灯片总数不是 slidesPerGroupgrid.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 中指定的类匹配的元素上滑动

默认值

true

可选 noSwipingClass

noSwipingClass: string

指定 noSwiping 元素的 CSS 类

默认值

'swiper-no-swiping'

可选 noSwipingSelector

noSwipingSelector: string

可以代替 noSwipingClass 使用,用于指定要禁用滑动的元素。例如,'input' 将禁用所有输入上的滑动

默认值

可选 normalizeSlideIndex

normalizeSlideIndex: boolean

规范化幻灯片索引。

默认值

true

可选 observeParents

observeParents: boolean

如果还需要观察 Swiper 父元素的突变,请设置为 true

默认值

false

可选 observeSlideChildren

observeSlideChildren: boolean

如果还需要观察 Swiper 幻灯片子元素的突变,请设置为 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 类名

默认值

'swiper-slide-active'

注意

通过更改类,您还需要更改 Swiper 的 CSS 以反映更改的类

注意

在 Swiper React/Vue 组件中不支持

可选 slideBlankClass

slideBlankClass: string

循环模式添加的空白幻灯片的 CSS 类名(当 loopAddBlankSlides 启用时)

默认值

'swiper-slide-blank'

注意

Swiper React/Vue 中不支持

可选 slideClass

slideClass: string

幻灯片的 CSS 类名

默认值

'swiper-slide'

注意

通过更改类,您还需要更改 Swiper 的 CSS 以反映更改的类

注意

在 Swiper React/Vue 组件中不支持

可选 slideFullyVisibleClass

slideFullyVisibleClass: string

完全(当整个幻灯片在视口中时)可见幻灯片的 CSS 类名

默认值

'swiper-slide-fully-visible'

注意

Swiper React/Vue 中不支持

可选 slideNextClass

slideNextClass: string

当前活动幻灯片右侧幻灯片的 CSS 类名

默认值

'swiper-slide-next'

注意

通过更改类,您还需要更改 Swiper 的 CSS 以反映更改的类

注意

Swiper React/Vue 中不支持

可选 slidePrevClass

slidePrevClass: string

当前活动幻灯片左侧幻灯片的 CSS 类名

默认值

'swiper-slide-prev'

注意

通过更改类,您还需要更改 Swiper 的 CSS 以反映更改的类

注意

Swiper React/Vue 中不支持

可选 slideToClickedSlide

slideToClickedSlide: boolean

设置为 true,点击任何幻灯片都会导致过渡到该幻灯片

默认值

false

可选 slideVisibleClass

slideVisibleClass: string

当前/部分可见幻灯片的 CSS 类名

默认值

'swiper-slide-visible'

注意

通过更改类,您还需要更改 Swiper 的 CSS 以反映更改的类

注意

Swiper React/Vue 中不支持

可选 slidesOffsetAfter

slidesOffsetAfter: number

在容器末尾(所有幻灯片之后)添加(以像素为单位)额外的幻灯片偏移量

默认值

0

可选 slidesOffsetBefore

slidesOffsetBefore: number

在容器开头(所有幻灯片之前)添加(以像素为单位)额外的幻灯片偏移量

默认值

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

注意

如果您对进入 Swiper 的元素使用“margin”css 属性,并且您将“spaceBetween”传递给它,导航可能无法正常工作。

可选 speed

speed: number

幻灯片之间过渡的持续时间(以毫秒为单位)

默认值

300

可选 swipeHandler

swipeHandler: any

包含 CSS 选择器或 HTML 元素,用于指定作为唯一可用滑动处理程序的分页容器

默认值

null

可选 swiperElementNodeName

swiperElementNodeName: string

swiper 元素节点名称;用于检测 Web 组件渲染

默认值

'SWIPER-CONTAINER'

可选 threshold

threshold: number

阈值(以像素为单位)。如果“触摸距离”低于此值,则 swiper 将不会移动

默认值

5

可选 thumbs

thumbs: any

包含缩略图组件参数的对象

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

可选 touchAngle

touchAngle: number

触发触摸移动的允许角度(以度为单位)

默认值

45

可选 touchEventsTarget

touchEventsTarget: "container" | "wrapper"

侦听触摸事件的目标元素。可以是 'container'(侦听 swiper 上的触摸事件)或 'wrapper'(侦听 swiper-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 将在窗口大小调整(方向更改)时重新计算幻灯片位置

默认值

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

启用此选项后,swiper 将像往常一样操作,只是它不会移动,包装器上的真实翻译值将不会设置。当您可能需要创建自定义幻灯片过渡时很有用

默认值

false

可选 watchOverflow

watchOverflow: boolean

启用后,如果幻灯片不足以滑动,Swiper 将被禁用并隐藏导航按钮。

默认值

true

可选 watchSlidesProgress

watchSlidesProgress: boolean

启用此功能可计算每张幻灯片的进度和可见性(视口中的幻灯片将具有额外的可见类)

默认值

false

可选 width

width: null | number

Swiper 宽度(以像素为单位)。该参数允许强制设置 Swiper 宽度。仅当您在隐藏状态下初始化 Swiper 并在 SSR 和测试环境中进行正确 Swiper 初始化时才有用

默认值

null

注意

设置此参数将使 Swiper 不再具有响应性

可选 wrapperClass

wrapperClass: string

幻灯片包装器的 CSS 类名

默认值

'swiper-wrapper'

注意

通过更改类,您还需要更改 Swiper 的 CSS 以反映更改的类

注意

Swiper React/Vue 中不支持

可选 zoom

zoom: any

启用缩放功能。包含缩放参数的对象,或者布尔值 true 以启用默认设置

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

方法

可选 onAny

  • onAny(handler: (eventName: string, ...args: any[]) => void): void
  • 添加将在所有事件上触发的事件监听器

    示例
    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

使用 TypeDoc 生成