SwiperOptions | Swiper - v12.0.1

层级

SwiperOptions

索引

属性

方法

onAny

属性

可选 _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: {}

允许为不同的响应式断点（屏幕尺寸）设置不同的参数。并非所有参数都可以在断点中更改，只有那些不需要不同布局和逻辑的参数，例如 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

断点的基础（测试版）。可以是 window 或 container。如果设置为 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。不适用于 loop 或 pagination

默认值: 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 且幻灯片总数不是 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 中指定的类匹配的元素上滑动

默认值: 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

- 定义于 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