Swiper API

带有 a11y 参数的对象或布尔值 true 以使用默认设置启用。

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

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

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

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

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

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

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

这是启用时不支持的功能

• 立方体效果
• 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>

带有立方体效果参数的对象

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

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

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

从屏幕左边缘释放触摸事件以在应用程序中滑动返回的区域（以像素为单位）

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

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

Swiper 元素（Web 组件）发出的所有 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 初始化时才有用

设置此参数将使 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() 手动初始化它。

初始幻灯片的索引号。

将文本样式注入阴影 DOM。仅用于 Swiper 元素

将样式 <link> 注入阴影 DOM。仅用于 Swiper 元素

启用使用键盘浏览幻灯片。带有键盘参数的对象或布尔值 true 以启用默认设置

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

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

延迟预加载器的 CSS 类名

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

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

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

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

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

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

如果您使用网格或 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 及其元素上启用 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 初始化时触发过渡/幻灯片更改/开始/结束事件。如果您的 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 中不支持

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

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

设置幻灯片组数以定义和启用分组滑动。当 slidesPerView > 1 时非常有用

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

此参数的工作方式如下：如果 slidesPerGroupSkip 等于 0（默认值），则不会从分组中排除任何幻灯片，并且最终行为与未进行此更改时相同。

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

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

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

幻灯片之间的距离，单位为像素。

如果您将 “margin” CSS 属性应用于传入 “spaceBetween” 的 Swiper 中的元素，导航可能无法正常工作。

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

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

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

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

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

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

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

用于监听触摸事件的目标元素。可以是 'container'（在滑块上监听触摸事件）或 'wrapper'（在滑块包装器上监听触摸事件）

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

触摸比例

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

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

如果禁用，则不会阻止 pointerdown 事件的默认行为

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

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

在服务器端渲染并启用历史记录时，检测活动幻灯片所必需

userAgent 字符串。在服务器端渲染时，进行浏览器/设备检测所必需

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

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

启用此选项后，滑块将照常运行，但不会移动，也不会在包装器上设置实际的 translate 值。当您可能需要创建自定义幻灯片过渡时非常有用

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

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

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 参数相反，即水平滑块方向使用垂直进度条，垂直滑块方向使用水平进度条。

分页进度条相反方向的 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。

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

更高的值会在你释放滑块后产生更大的动量距离。

更高的值会在你释放滑块后产生更大的动量速度。

设置为启用可在自由模式下启用对齐到幻灯片位置。

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

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

多行布局的幻灯片行数。

如果要使用滑块内部的“视差”元素，则启用此参数

启用幻灯片交叉淡入淡出

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

效果乘数

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

幻灯片缩放效果

启用幻灯片阴影

幻灯片之间的拉伸空间（以像素为单位）

限制边缘幻灯片的旋转

启用幻灯片阴影

启用主滑块阴影

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

主阴影缩放比例

启用幻灯片阴影

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

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

启用卡片旋转

启用幻灯片阴影

将进度/偏移量限制为侧面幻灯片的数量。如果为 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 参数的对象

将添加到缩略图滑块的附加类

缩放容器的 CSS 类名

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

最大图像缩放倍数

最小图像缩放倍数

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

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

放大容器的 CSS 类名

设置为 true 以启用键盘控制

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

启用后，它将允许使用 Page Up 和 Page Down 键进行键盘导航

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

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

设置为 true 以强制鼠标滚轮滑动到轴。 因此，在水平模式下，鼠标滚轮将仅适用于水平鼠标滚轮滚动，而在垂直模式下仅适用于垂直滚动。

设置为 true 以反转滑动方向

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

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

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

触发滑块切换的最小鼠标滚轮滚动增量

触发滑块切换的最小鼠标滚轮滚动时间增量（以毫秒为单位）

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

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

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

是否启用虚拟幻灯片

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

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

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

用于渲染幻灯片的函数。 作为参数，它接受 slides 数组的当前幻灯片项目和当前幻灯片的索引号。 函数必须返回滑块幻灯片的外部 HTML 或幻灯片 HTML 元素。

幻灯片数组

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

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

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

启用历史记录插件。

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

幻灯片的 URL 键

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

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

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

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

设置为 true 并且控制方向将反向

外部滑块容器的屏幕阅读器消息

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

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

启用 A11y

当滑块位于第一张幻灯片时，用于前一个按钮的屏幕阅读器消息

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

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

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

为屏幕阅读器提供的“下一张”按钮的消息

A11y 通知的 CSS 类名

为屏幕阅读器提供的单个分页圆点消息

为屏幕阅读器提供的“上一张”按钮的消息

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

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

Swiper 幻灯片 role 属性的值