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 容器宽度

带有卡片效果参数的对象

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））

带有创意效果参数的对象

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 的所有功能，但可能在简单配置中带来更好的性能。

启用后，不支持以下内容

• Cube 效果
• 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,
  },
});

可以是 “水平” 或 “垂直”（适用于垂直滑块）。

启用以释放 Swiper 事件，以便在应用中进行轻扫返回操作。如果设置为 “阻止”，则它将阻止系统轻扫返回导航。此功能仅适用于“触摸”事件（而不是指针事件），因此它适用于 iOS/Android 设备，而不适用于具有指针（触摸）事件的 Windows 设备。

从屏幕左侧开始的区域（以像素为单位），用于释放触摸事件以在应用中进行轻扫返回操作

过渡效果。可以是 “滑动”、“淡入淡出”、“立方体”、“封面流”、“翻转”、“创意” 或 “卡片”

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

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

具有淡入淡出效果参数的对象

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

具有翻转效果参数的对象

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 高度（以像素为单位）。此参数允许强制设置 Swiper 高度。仅当在隐藏时初始化 Swiper 以及在 SSR 和测试环境中进行正确的 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>s 注入到 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，以正确拦截触摸事件。仅在与父级使用相同方向的滑块上使用

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

指定 noSwiping 的元素 css 类

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

标准化幻灯片索引。

如果您还需要监视 Swiper 父元素的变动，则设置为 true

如果您还需要监视 Swiper 幻灯片子元素的变动，则设置为 true

设置为 true 以在 Swiper 及其元素上启用变动观察器。在这种情况下，如果您更改其样式（如隐藏/显示）或修改其子元素（如添加/移除幻灯片），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 初始化时触发过渡/幻灯片更改/开始/结束事件。如果您的 initialSlide 不为 0，或者您使用循环模式，则会在初始化时触发此类事件

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

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

启用此选项，插件将在 swiper wrapper 上设置宽度/高度，等于所有幻灯片的总大小。主要用作兼容性后备选项，适用于不支持 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 中不受支持

在容器末尾（所有幻灯片之后）添加（以像素为单位）附加幻灯片偏移量

在容器开头（所有幻灯片之前）添加（以像素为单位）附加幻灯片偏移量

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

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

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

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

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

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

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

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

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

带有分页容器的 CSS 选择器或 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 将像往常一样操作，但它不会移动，包装器上的真实平移值不会被设置。当您可能需要创建自定义幻灯片过渡时，此功能非常有用

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

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

Swiper 宽度（以像素为单位）。此参数允许强制设置 Swiper 宽度。仅在 Swiper 在隐藏状态下初始化时，以及在 SSR 和测试环境中，为正确初始化 Swiper 时才很有用

设置此参数将使 Swiper 失去响应性

幻灯片包装器的 CSS 类名

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

在 Swiper React/Vue 中不受支持

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

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

当导航按钮变为禁用状态时添加的 CSS 类名

与断点一起使用的布尔属性，用于在特定断点上启用/禁用导航

当导航按钮变为隐藏状态时添加的 CSS 类名

在点击滑块容器后切换导航按钮的可见性

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

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

点击后将作为“下一步”按钮工作的元素的 CSS 选择器或 HTML 元素的字符串

点击后将作为“上一步”按钮工作的元素的 CSS 选择器或 HTML 元素的字符串

当前活动分页项目符号的 CSS 类名

单个分页项目符号的 CSS 类名

定义哪个 HTML 标记将用于表示单个分页项目符号。仅适用于'bullets'分页类型。

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

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

"fraction" 分页中当前活动索引的元素的 CSS 类名

如果你使用带有大量幻灯片的项目符号分页，最好启用此功能。因此，它将同时保持只有几个项目符号可见。

启用dynamicBullets时可见的主项目符号数。

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

与断点一起使用的布尔属性，用于在特定断点上启用/禁用分页

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

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

当分页变为非活动状态时的分页 CSS 类名

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

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

当分页被禁用时设置到分页的 CSS 类名

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

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

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

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

分页进度条相反的 CSS 类名

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

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

此参数对于'custom'分页类型是必需的，您必须在此处指定如何呈现它。

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

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

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

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

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

“分数”分页中具有“快照”总数的元素的 CSS 类名

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

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

滚动条可拖动元素的 CSS 类

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

设置为 true 以启用滚动条可拖动，以便控制滑块位置

带有滚动条的容器的 CSS 选择器或 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

较高的值会产生更大的动量反弹效果

释放滑块后，较高的值会产生更大的动量距离

释放滑块后，较高的值会产生更大的动量速度

设置为启用以启用在自由模式下捕捉幻灯片位置

可以是 “列” 或 “行”。定义幻灯片应如何按列或按行填充行

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

幻灯片行数，用于多行布局

启用，如果你想在滑块内使用“视差”元素

启用幻灯片交叉淡入淡出

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

效果乘数

滑动旋转度数

滑动缩放效果

启用幻灯片阴影

拉伸幻灯片之间的间距（以 px 为单位）

限制边缘幻灯片的旋转

启用幻灯片阴影

启用主滑块阴影

以 px 为单位的主阴影偏移

主阴影缩放比例

启用幻灯片阴影

每个幻灯片的偏移距离（以 px 为单位）

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

启用卡片旋转

启用幻灯片阴影

将进度/偏移限制为侧边幻灯片数量。如果为 1，则 prev/next 之后的幻灯片将具有相同的状态。如果为 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 参数的对象

将添加到缩略图 swiper 的附加类

缩放容器的 CSS 类名

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

图像的最大缩放倍数

图像的最小缩放倍数

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

放大容器的 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 元素。

包含幻灯片的数组

旨在与虚拟幻灯片一起使用，当无法通过哈希在 DOM 中找到幻灯片时（例如尚未呈现）

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

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

启用历史插件。

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

幻灯片的 URL 键

除了 hashnav 或历史记录外，还可以替换当前 URL 状态，而不是将其添加到历史记录中

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

定义控制另一个滑块的方式：逐个幻灯片（相对于其他滑块的网格）或根据所有幻灯片/容器（取决于总滑块百分比）。

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

设置为 true，控制将按相反方向进行

屏幕阅读器用于外部 swiper 容器的消息

用于屏幕阅读器描述外部 swiper 容器角色的消息

启用 A11y

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

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

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

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

用于屏幕阅读器上一个按钮的消息

A11y 通知的 CSS 类名

用于屏幕阅读器描述单个分页项目的消息

用于屏幕阅读器上一个按钮的消息

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

swiper 幻灯片 role 属性的值