Swiper API

包含 a11y 参数的对象，或布尔值 true 以默认设置启用。

const swiper = new Swiper('.swiper', {
  a11y: {
    prevSlideMessage: 'Previous slide',
    nextSlideMessage: 'Next slide',
  },
});

设置为 false 以禁用向下一个幻灯片方向滑动（向右或向下）

设置为 false 以禁用向上一个幻灯片方向滑动（向左或向上）

如果为 false，则切换幻灯片的唯一方法是使用外部 API 函数，如 slidePrev 或 slideNext

设置为 true，滑块包装器将根据当前活动幻灯片的高度调整其高度

包含自动播放参数的对象，或布尔值 true 以默认设置启用

const swiper = new Swiper('.swiper', {
 autoplay: {
   delay: 5000,
 },
});

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

断点基准（测试版）。可以是 window 或 container。如果设置为 window（默认），则断点键表示窗口宽度。如果设置为 container，则断点键被视为 swiper 容器宽度

包含 Cards 效果参数的对象

const swiper = new Swiper('.swiper', {
  effect: 'cards',
  cardsEffect: {
    // ...
  },
});

启用后，如果幻灯片数量少于 slidesPerView，它将居中幻灯片。不适用于 loop 模式和 grid.rows

如果为 true，则活动幻灯片将居中，而不是始终在左侧。

如果为 true，则活动幻灯片将居中，而不会在滑块的开头和结尾添加间隙。需要 centeredSlides: true。不适用于 loop 或 pagination

可根据不同参数添加到 swiper 容器的修改器 CSS 类开头

包含控制器参数的对象，或布尔值 true 以默认设置启用

const swiper = new Swiper('.swiper', {
  controller: {
    inverse: true,
  },
});

包含 Coverflow 效果参数的对象。

const swiper = new Swiper('.swiper', {
  effect: 'coverflow',
  coverflowEffect: {
    rotate: 30,
    slideShadows: false,
  },
});

启用后，Swiper 将自动用 swiper-wrapper 元素包装幻灯片，如果启用（使用各自的参数对象或布尔值 true），它将为导航、分页和滚动条创建所需的元素

包含 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],
    },
  },
});

启用后，它将使用现代 CSS Scroll Snap API。它不支持 Swiper 的所有功能，但在简单配置中可能会带来更好的性能。

启用时不支持以下功能

• 立方体效果
• speed 参数可能没有效果
• 所有与过渡开始/结束相关的事件（请改用 slideChange）
• slidesPerGroup 支持有限
• simulateTouch 没有效果，“用鼠标拖动”不起作用
• resistance 没有任何效果
• allowSlidePrev/Next
• swipeHandler

如果您将其与其他效果，特别是 3D 效果一起使用，则需要将幻灯片内容包装在 <div className="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>

包含 Cube 效果参数的对象

const swiper = new Swiper('.swiper', {
  effect: 'cube',
  cubeEffect: {
    slideShadows: false,
  },
});

可以是 'horizontal' 或 'vertical'（用于垂直滑块）。

启用以在应用程序中释放 Swiper 事件以进行滑动返回工作。如果设置为 'prevent'，则会阻止系统滑动返回导航。此功能仅适用于“触摸”事件（而非指针事件），因此它将在 iOS/Android 设备上工作，但在带有指针（触摸）事件的 Windows 设备上不起作用。

屏幕左边缘的区域（以 px 为单位），用于在应用程序中释放触摸事件以进行滑动返回

过渡效果。可以是 'slide'、'fade'、'cube'、'coverflow'、'flip'、'creative' 或 'cards'

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

Swiper Element（Web 组件）发出的所有 DOM 事件的事件名称前缀

包含 Fade 效果参数的对象

const swiper = new Swiper('.swiper', {
  effect: 'fade',
  fadeEffect: {
    crossFade: true
  },
});

包含 Flip 效果参数的对象

const swiper = new Swiper('.swiper', {
  effect: 'flip',
  flipEffect: {
    slideShadows: false,
  },
});

可聚焦元素的 CSS 选择器。如果这些元素“聚焦”，则在其上禁用滑动

如果禁用，则滑块只会在您松开手指时动画，当您将手指按在上面时它不会移动

启用自由模式功能。包含自由模式参数的对象，或布尔值 true 以默认设置启用。

const swiper = new Swiper('.swiper', {
  freeMode: true,
});

const swiper = new Swiper('.swiper', {
  freeMode: {
    enabled: true,
    sticky: true,
  },
});

此选项可能会稍微改善桌面可用性。如果为 true，用户在悬停在 Swiper 上时将看到“抓取”光标

包含网格参数的对象，以启用“多行”滑块。

const swiper = new Swiper('.swiper', {
  grid: {
    rows: 2,
  },
});

启用幻灯片的哈希 URL 导航。包含哈希导航参数的对象，或布尔值 true 以默认设置启用

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

Swiper 高度（以 px 为单位）。参数允许强制 Swiper 高度。仅当您在隐藏和 SSR 及测试环境中初始化 Swiper 以进行正确 Swiper 初始化时才有用

设置此参数将使 Swiper 不响应

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

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

初始幻灯片的索引号。

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

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

启用使用键盘在幻灯片之间导航。包含键盘参数的对象，或布尔值 true 以默认设置启用

const swiper = new Swiper('.swiper', {
  keyboard: {
    enabled: true,
    onlyInViewport: false,
  },
});

要预加载的下一个和上一个幻灯片数量。仅在使用延迟加载时适用。

延迟预加载器的 CSS 类名

如果您想禁用长滑动，请设置为 false

在长滑动期间触发滑动到下一张/上一张幻灯片的最小持续时间（以毫秒为单位）

在长滑动期间触发滑动到下一张/上一张幻灯片的比率

设置为 true 以启用连续循环模式

由于循环模式的工作原理（它将重新排列幻灯片），幻灯片总数必须

• 大于或等于 slidesPerView + slidesPerGroup
• 甚至 slidesPerGroup（或使用 loopAddBlankSlides 参数）
• 甚至 grid.rows（或使用 loopAddBlankSlides 参数）

如果您使用 Grid 或 slidesPerGroup 并且幻灯片总数与 slidesPerGroup 或 grid.rows 不相等，则自动添加空白幻灯片

允许增加循环幻灯片的数量

如果启用，则在循环模式下，当滑块正在动画时，slideNext/Prev 将不起作用

如果幻灯片总数小于此处指定的值，则 Swiper 将在幻灯片元素上启用 backface-visibility: hidden 以减少 Safari 中的视觉“闪烁”。

不建议在大量幻灯片上启用它，因为它会降低性能

包含 Swiper 模块的数组

import Swiper from 'swiper';
import { Navigation, Pagination } from 'swiper/modules';

const swiper = new Swiper('.swiper', {
   modules: [ Navigation, Pagination ],
 });

启用使用鼠标滚轮在幻灯片之间导航。包含鼠标滚轮参数的对象，或布尔值 true 以默认设置启用

const swiper = new Swiper('.swiper', {
  mousewheel: {
    invert: true,
  },
});

包含导航参数的对象，或布尔值 true 以默认设置启用。

const swiper = new Swiper('.swiper', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

在 Swiper 上设置为 true 以正确拦截触摸事件。仅在与父级方向相同的 swiper 上使用

启用/禁用在与 noSwipingClass 中指定的类匹配的元素上滑动

指定 noSwiping 的元素 CSS 类

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

标准化幻灯片索引。

如果您还需要监视 Swiper 父元素的 Mutation，请设置为 true

如果您还需要监视 Swiper 子元素的 Mutation，请设置为 true

设置为 true 以在 Swiper 及其元素上启用 Mutation Observer。在这种情况下，如果您更改其样式（如隐藏/显示）或修改其子元素（如添加/删除幻灯片），Swiper 将每次更新（重新初始化）

注册事件处理程序

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

const swiper = new Swiper('.swiper', {
   onAny(eventName, ...args) {
     console.log('Event: ', eventName);
     console.log('Event data: ', args);
   }
 });

启用后，无论滑动方向如何，都只向前滑动（单向）幻灯片

包含分页参数的对象，或布尔值 true 以默认设置启用。

const swiper = new Swiper('.swiper', {
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
  },
});

包含视差参数的对象，或布尔值 true 以默认设置启用。

const swiper = new Swiper('.swiper', {
  parallax: true,
});

在可能的情况下，默认将使用被动事件监听器来改善移动设备上的滚动性能。但是，如果您需要使用 e.preventDefault 并且与它发生冲突，则应禁用此参数

设置为 true 以防止在滑动过程中意外点击链接

设置为 true 以阻止在滑动过程中点击事件传播到链接

启用后，在过渡期间不允许通过滑动或导航/分页按钮更改幻灯片

如果您想禁用弹性边界，请设置为 false

此选项允许您控制阻力比

启用后，它将在 swiper 容器上使用 ResizeObserver（如果浏览器支持）来检测容器大小调整（而不是监视窗口大小调整）

设置为 true 以启用“倒带”模式。启用后，在最后一张幻灯片上单击“下一张”导航按钮（或调用 .slideNext()）将滑回到第一张幻灯片。在第一张幻灯片上单击“上一张”导航按钮（或调用 .slidePrev()）将向前滑动到最后一张幻灯片。

不应与 loop 模式一起使用

设置为 true 以舍入幻灯片宽度和高度的值，以防止在常规分辨率屏幕上出现模糊文本（如果您有此类问题）

在 swiper 初始化时触发 Transition/SlideChange/Start/End 事件。如果您的 initialSlide 不为 0，或者您使用循环模式，则在初始化时将触发此类事件

包含滚动条参数的对象，或布尔值 true 以默认设置启用。

const swiper = new Swiper('.swiper', {
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
  },
});

启用此选项，插件将设置 swiper 包装器的宽度/高度等于所有幻灯片的总大小。主要应作为浏览器不支持 flexbox 布局的兼容性回退选项使用

如果您想禁用短滑动，请设置为 false

如果为 true，Swiper 将像触摸事件一样接受鼠标事件（单击和拖动以更改幻灯片）

当前活动幻灯片的 CSS 类名

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

在 Swiper React/Vue 组件中不支持

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

在 Swiper React/Vue 中不支持

幻灯片的 CSS 类名

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

在 Swiper React/Vue 组件中不支持

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

在 Swiper React/Vue 中不支持

当前活动幻灯片之后紧邻的幻灯片的 CSS 类名

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

在 Swiper React/Vue 中不支持

当前活动幻灯片之前紧邻的幻灯片的 CSS 类名

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

在 Swiper React/Vue 中不支持

设置为 true，点击任何幻灯片都将导致过渡到此幻灯片

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

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

在 Swiper React/Vue 中不支持

在容器末尾（所有幻灯片之后）添加（以 px 为单位）额外的幻灯片偏移

在容器开头（所有幻灯片之前）添加（以 px 为单位）额外的幻灯片偏移

设置幻灯片数量以定义和启用组滑动。与 slidesPerView > 1 一起使用时很有用

此参数仅适用于 slidesPerView: 'auto' 和 slidesPerGroup: 1。启用后，它将在调用 .slideNext() 和 .slidePrev() 方法时，在导航“按钮”点击时以及在自动播放中跳过视图中的所有幻灯片。

该参数的工作方式如下：如果 slidesPerGroupSkip 等于 0（默认），则没有幻灯片被排除在分组之外，结果行为与没有此更改时相同。

如果 slidesPerGroupSkip 等于或大于 1，则前 X 张幻灯片被视为单个组，而所有后续幻灯片按 slidesPerGroup 值分组。

每视图幻灯片数量（在滑块容器上同时可见的幻灯片）。

slidesPerView: 'auto' 目前与多行模式不兼容，当 grid.rows > 1 时

幻灯片之间的距离（以 px 为单位）。

如果您对传入 "spaceBetween" 的 Swiper 元素使用 "margin" css 属性，导航可能无法正常工作。

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

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

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

阈值（以 px 为单位）。如果“触摸距离”低于此值，则 swiper 将不会移动

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

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

触发触摸移动的允许角度（以度为单位）

监听触摸事件的目标元素。可以是 'container'（监听 swiper 上的触摸事件）或 'wrapper'（监听 swiper-wrapper 上的触摸事件）

如果启用，则将停止“touchmove”的传播

触摸比率

启用以在滑块边缘位置（开始、结束）释放触摸事件，以允许进一步的页面滚动。此功能仅适用于“触摸”事件（而非指针事件），因此它将在 iOS/Android 设备上工作，但在带有指针事件的 Windows 设备上不起作用。此外，threshold 参数必须设置为 0

强制始终阻止 touchstart (pointerdown) 事件的默认行为

如果禁用，则不会阻止 pointerdown 事件

如果启用（默认）且导航元素参数作为字符串传递（如 ".pagination"），则 Swiper 将首先通过子元素查找此类元素。适用于分页、上一个/下一个按钮和滚动条元素

Swiper 将在窗口大小调整（方向更改）时重新计算幻灯片位置

在服务器端渲染和启用历史记录时，需要用于活动幻灯片检测

用户代理字符串。在服务器端渲染时需要用于浏览器/设备检测

启用虚拟幻灯片功能。包含虚拟幻灯片参数的对象，或布尔值 true 以默认设置启用。

const swiper = new Swiper('.swiper', {
  virtual: {
    slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'],
  },
});

启用此选项后，swiper 将正常运行，只是它不会移动，不会设置包装器上的实际 translate 值。当您可能需要创建自定义幻灯片过渡时很有用

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

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

Swiper 宽度（以 px 为单位）。参数允许强制 Swiper 宽度。仅当您在隐藏和 SSR 及测试环境中初始化 Swiper 以进行正确 Swiper 初始化时才有用

设置此参数将使 Swiper 不响应

幻灯片包装器的 CSS 类名

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

在 Swiper React/Vue 中不支持

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

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

导航按钮禁用时添加的 CSS 类名

用于断点以启用/禁用某些断点上的导航的布尔属性

导航按钮隐藏时添加的 CSS 类名

单击滑块容器后切换导航按钮可见性

导航按钮禁用时添加的 CSS 类名

当导航被断点禁用时，添加到 swiper 容器的 CSS 类名

带有 CSS 选择器或 HTML 元素的字符串或 HTML 元素，该元素在点击后将作为“下一个”按钮

带有 CSS 选择器或 HTML 元素的字符串或 HTML 元素，该元素在点击后将作为“上一个”按钮

当前活动分页子弹的 CSS 类名

单个分页子弹的 CSS 类名

定义将用于表示单个分页子弹的 HTML 标签。仅适用于 'bullets' 分页类型。

如果为 true，则单击分页按钮将导致过渡到相应的幻灯片。仅适用于子弹分页类型

分页可点击时设置的 CSS 类名

在“分数”分页中，当前活动索引元素的 CSS 类名

如果您使用子弹分页且幻灯片很多，则启用它会很好。这样它将同时只显示几个子弹。

启用 dynamicBullets 时可见的主子弹数量。

带有 CSS 选择器或 HTML 元素的分页容器的字符串或 HTML 元素

用于断点以启用/禁用某些断点上的分页的布尔属性

格式化分数分页当前数字。函数接收当前数字，您需要返回格式化的值

格式化分数分页总数。函数接收总数，您需要返回格式化的值

分页不活动时，其 CSS 类名

单击滑块容器后切换（隐藏/显示）分页容器可见性

在水平 Swiper 中，设置为分页的 CSS 类名

分页禁用时，设置为分页的 CSS 类名

根据参数将添加到分页的修改器 CSS 类名的开头

当分页被断点禁用时，添加到 swiper 容器和分页元素的 CSS 类名

分页进度条填充元素的 CSS 类名

使分页进度条与 Swiper 的 direction 参数相反，意味着水平 swiper 方向的垂直进度条和垂直 swiper 方向的水平进度条

分页进度条相反的 CSS 类名

此参数允许完全自定义分页子弹，您需要在此处传递一个接受分页子弹的 index 数字和所需的元素类名 (className) 的函数。仅适用于 'bullets' 分页类型

const swiper = new Swiper('.swiper', {
  //...
  pagination: {
    //...
    renderBullet: function (index, className) {
      return '<span class="' + className + '">' + (index + 1) + '</span>';
    },
  },
});

此参数是 'custom' 分页类型所必需的，您必须指定应如何渲染它。

const swiper = new Swiper('.swiper', {
  //...
  pagination: {
    //...
    renderCustom: function (swiper, current, total) {
      return current + ' of ' + total;
    },
  },
});

此参数允许自定义“分数”分页 HTML。仅适用于 'fraction' 分页类型

const swiper = new Swiper('.swiper', {
  //...
  pagination: {
    //...
    renderFraction: function (currentClass, totalClass) {
      return '<span class="' + currentClass + '"></span>' +
              ' of ' +
              '<span class="' + totalClass + '"></span>';
    },
  },
});

此参数允许自定义“进度”分页。仅适用于 'progress' 分页类型

const swiper = new Swiper('.swiper', {
  //...
  pagination: {
    //...
    renderProgressbar: function (progressbarFillClass) {
      return '<span class="' + progressbarFillClass + '"></span>';
    },
  },
});

在“分数”分页中，包含“捕捉”总数的元素的 CSS 类名

带有分页类型的字符串。可以是 'bullets'、'fraction'、'progressbar' 或 'custom'

在垂直 Swiper 中，设置为分页的 CSS 类名

滚动条可拖动元素的 CSS 类

滚动条可拖动元素的大小（以 px 为单位）

设置为 true 以启用滚动条可拖动，从而允许您控制滑块位置

带有 CSS 选择器或 HTML 元素的滚动条容器的字符串或 HTML 元素。

用于断点以启用/禁用某些断点上的滚动条的布尔属性

用户交互后自动隐藏滚动条

在水平 Swiper 中，设置为滚动条的 CSS 类名

滚动条元素禁用时，额外的 CSS 类

当滚动条被断点禁用时，添加到 swiper 容器和滚动条元素的 CSS 类名

设置为 true 以在释放滚动条时将滑块位置捕捉到幻灯片

在垂直 Swiper 中，设置为滚动条的 CSS 类名

过渡之间的延迟（以毫秒为单位）。如果未指定此参数，则将禁用自动播放

如果您需要为特定幻灯片指定不同的延迟，可以通过在幻灯片上使用 data-swiper-autoplay（以毫秒为单位）属性来完成。

<!-- hold this slide for 2 seconds -->
<div class="swiper-slide" data-swiper-autoplay="2000">

设置为 false 后，用户交互（滑动）后自动播放不会被禁用，每次交互后都会重新启动

启用后，自动播放将在指针（鼠标）进入 Swiper 容器时暂停。

启用反向自动播放

启用此参数后，当自动播放到达最后一张幻灯片时将停止（在循环模式下无效）

启用后，自动播放将等待包装器过渡继续。在使用虚拟转换时可以禁用，此时您的滑块可能没有转换

自由模式是否启用

触发自由模式动量所需的最小 touchmove 速度

如果启用，则在您释放滑块后，滑块将继续移动一段时间

如果您想禁用自由模式下的动量反弹，请设置为 false

值越高，产生更大的动量反弹效果

值越高，在您释放滑块后，产生更大的动量距离

值越高，在您释放滑块后，产生更大的动量速度

设置为启用，以在自由模式下启用幻灯片位置的吸附

可以是 'column' 或 'row'。定义幻灯片应如何填充行，按列或按行

如果与循环模式一起使用，请确保幻灯片数量与循环模式要求中指定的一致，或者启用 loopAddBlankSlides 参数

多行布局的幻灯片行数

如果您想在滑块中使用“视差”元素，请启用此项

启用幻灯片交叉淡入淡出

深度偏移量（以像素为单位，幻灯片在 Z 轴上平移）

效果乘数

幻灯片旋转角度（以度为单位）

幻灯片缩放效果

启用幻灯片阴影

拉伸幻灯片之间的空间

• 数字被解释为像素（例如，20 表示 20 像素）。
• 带百分比的字符串（例如，"50%"）。

限制边缘幻灯片旋转

启用幻灯片阴影

启用主滑块阴影

主阴影偏移量（以像素为单位）

主阴影缩放比例

启用幻灯片阴影

每张幻灯片的偏移距离（以像素为单位）

每张幻灯片的旋转角度（以度为单位）

启用卡片旋转

启用幻灯片阴影

将进度/偏移量限制在侧边幻灯片的数量。如果为 1，则 prev/next 之后的所有幻灯片将具有相同的状态。如果为 2，则活动幻灯片前后第 2 张之后的所有幻灯片将具有相同的状态，依此类推。

下一张幻灯片变换。

{
  // Array with translate X, Y and Z values
  translate: (string | number)[];
  // Array with rotate X, Y and Z values (in deg)
  rotate?: number[];
  // Slide opacity
  opacity?: number;
  // Slide scale
  scale?: number;
  // Enables slide shadow
  shadow?: boolean;
  // Transform origin, e.g. `left bottom`
  origin?: string;
}

如果您的自定义变换需要 3D 变换（translateZ、rotateX、rotateY），请启用此参数

上一张幻灯片变换。接受以下类型的对象

{
  // Array with translate X, Y and Z values
  translate: (string | number)[];
  // Array with rotate X, Y and Z values (in deg)
  rotate?: number[];
  // Slide opacity
  opacity?: number;
  // Slide scale
  scale?: number;
  // Enables slide shadow
  shadow?: boolean;
  // Transform origin, e.g. `left bottom`
  origin?: string;
}

允许乘以幻灯片变换和不透明度。

根据 limitProgress 拆分每张幻灯片的阴影“不透明度”（仅当启用变换阴影时）。例如，设置 limitProgress: 2 并启用 shadowPerProgress，将设置活动幻灯片旁边的两张幻灯片的阴影不透明度为 0.5 和 1。禁用此参数后，除了活动幻灯片之外的所有幻灯片都将具有不透明度为 1 的阴影

允许设置当活动缩略图从边缘移动到何处时，它应该自动滚动缩略图。例如，如果设置为 1 并且最后一个可见缩略图被激活（距离边缘 1），它将自动滚动缩略图

启用后，多个缩略图幻灯片可能会被激活

将添加到激活的缩略图 Swiper 幻灯片的额外类

用作缩略图的 Swiper 实例或包含 Swiper 参数的对象以初始化缩略图 Swiper

将添加到缩略图 Swiper 的额外类

缩放容器的 CSS 类名

设置为 true 时，图像将不会超过其原始大小的 100% 缩放

最大图像缩放乘数

最小图像缩放乘数

设置为 true 时，缩放的图像在鼠标移过图像时会自动平移

通过幻灯片双击启用/禁用缩放

缩放容器的 CSS 类名

设置为 true 以启用键盘控制

启用后，它将控制当前在视口中的滑块

启用后，它将启用通过 Page Up 和 Page Down 键进行键盘导航

设置为 true 以启用鼠标滚轮控制

接受鼠标滚轮事件的容器的 CSS 选择器字符串或 HTML 元素。默认情况下它是 swiper

设置为 true 以强制鼠标滚轮滑动到轴。因此，在水平模式下，鼠标滚轮将仅与水平鼠标滚轮滚动一起工作，在垂直模式下仅与垂直滚动一起工作。

设置为 true 以反转滑动方向

具有此类的元素上的滚动将被忽略

设置为 true 后，当 Swiper 处于边缘位置（开始或结束）时，Swiper 将释放鼠标滚轮事件并允许页面滚动

鼠标滚轮数据的乘数，允许调整鼠标滚轮灵敏度

触发 Swiper 幻灯片更改的最小鼠标滚轮滚动增量

触发 Swiper 幻灯片更改的最小鼠标滚轮滚动时间增量（以毫秒为单位）

增加活动幻灯片后预渲染幻灯片的数量

增加活动幻灯片前预渲染幻灯片的数量

启用渲染幻灯片 HTML 元素的 DOM 缓存。一旦它们被渲染，它们将被保存到缓存中并从中重用。

虚拟幻灯片是否已启用

用于外部渲染的函数（例如，使用其他库处理 DOM 操作和状态，如 React.js 或 Vue.js）。它接受一个包含以下属性的 data 对象作为参数

• offset - 幻灯片左/上偏移量（以像素为单位）
• from - 需要渲染的第一张幻灯片的索引
• to - 需要渲染的最后一张幻灯片的索引
• slides - 包含要渲染的幻灯片项的数组

启用后（默认），它将在调用 renderExternal 后立即更新 Swiper 布局。当与异步渲染的渲染库一起使用时，禁用并手动更新 Swiper 会很有用

渲染幻灯片的函数。它接受 slides 数组的当前幻灯片项和当前幻灯片的索引号作为参数。函数必须返回 Swiper 幻灯片的外层 HTML 或幻灯片 HTML 元素。

包含幻灯片的数组

slidesPerView: auto 的幻灯片大小（以像素为单位）

设计用于虚拟幻灯片，当无法通过哈希在 DOM 中找到幻灯片时（例如，尚未渲染）

除了哈希导航之外，还用于将当前 URL 状态替换为新状态，而不是将其添加到历史记录中

设置为 true 以启用通过浏览器历史记录或直接在文档位置设置哈希来导航幻灯片（当哈希导航启用时）

启用历史记录插件。

更改浏览器 URL 时保留查询参数。

幻灯片的 URL 键

除了哈希导航或历史记录之外，还用于将当前 URL 状态替换为新状态，而不是将其添加到历史记录中

Swiper 页面根目录，当您在非根网站页面上使用 Swiper 历史模式时很有用。例如可以是 https://my-website.com/ 或 https://my-website.com/subpage/ 或 /subpage/

定义了如何控制另一个滑块：逐张幻灯片（考虑到另一个滑块的网格）或取决于所有幻灯片/容器（取决于滑块总百分比）。

在此处传递另一个 Swiper 实例或包含应由当前 Swiper 控制的 Swiper 实例的数组。也接受 Swiper 元素的 CSS 选择器字符串或 Swiper 元素的 HTMLElement

设置为 true 后，控制将反向进行

外部 Swiper 容器的屏幕阅读器消息

要在 Swiper 容器上设置的“role”属性值

屏幕阅读器描述外部 Swiper 容器角色的消息

启用 A11y

当 Swiper 处于第一张幻灯片时，上一张按钮的屏幕阅读器消息

要在 swiper-wrapper 上设置的 id 属性值。如果为 null，将自动生成

屏幕阅读器描述幻灯片元素角色的消息

当 Swiper 处于最后一张幻灯片时，下一张按钮的屏幕阅读器消息

下一张按钮的屏幕阅读器消息

A11y 通知器的 CSS 类名

单个分页子弹的屏幕阅读器消息

上一张按钮的屏幕阅读器消息

启用滚动到已聚焦的幻灯片

屏幕阅读器描述幻灯片元素标签的消息

Swiper 幻灯片 role 属性的值

swiper-wrapper 是否应应用 aria-live 属性。如果为 true，当自动播放启用时，值为 off，否则为 polite