SwiperOptions | Swiper - v11.2.0

层级

SwiperOptions

索引

属性

方法

onAny

属性

可选 _emitClasses

_emitClasses: boolean

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

可选 a11y

a11y: any

带有 a11y 参数的对象或布尔值 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

断点的基础（beta 版）。可以是 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

带有 Creative 效果参数的对象

示例

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 Scroll Snap 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'

可选 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 时，此参数才有用，以确保 Swiper 正确初始化

默认: null
注意: 设置此参数将使 Swiper 不再响应

可选 history

history: any

启用历史记录推送状态，其中每个幻灯片都有其自己的 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[]

将文本样式注入到阴影 DOM 中。仅适用于 Swiper Element

可选 injectStylesUrls

injectStylesUrls: string[]

将 <link> 样式注入到阴影 DOM 中。仅适用于 Swiper Element

可选 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 父元素的 Mutation，请设置为 true。

默认: false

可选 observeSlideChildren

observeSlideChildren: boolean

如果还需要监视 Swiper 幻灯片子元素的 Mutation，请设置为 true。

默认: false

可选 observer

observer: boolean

设置为 true 以启用 Swiper 及其元素上的 Mutation Observer。在这种情况下，如果更改 Swiper 的样式（如隐藏/显示）或修改其子元素（如添加/删除幻灯片），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 wrapper 上设置等于所有幻灯片总大小的宽度/高度。主要用作对 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
注意: 如果您在传入 "spaceBetween" 的 Swiper 中对元素使用 "margin" CSS 属性，则导航可能无法正常工作。

可选 speed

speed: number

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

默认: 300

可选 swipeHandler

swipeHandler: any

CSS 选择器字符串或 HTML 元素，表示带有分页的容器，该容器将作为唯一可用的滑动处理程序

默认: null

可选 swiperElementNodeName

swiperElementNodeName: string

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

默认: 'SWIPER-CONTAINER'

可选 threshold

threshold: number

以像素为单位的阈值。如果“触摸距离”低于此值，则滑块将不会移动

默认: 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 将在窗口大小调整（orientationchange）时重新计算幻灯片位置

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

启用此功能可计算每个幻灯片的进度和可见性（视口中的幻灯片将具有额外的 visible 类）

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