主题
SwiperJS
Swiper 官网为 https://swiperjs.com/ 。 它提供了现代的轮播图套件，且功能多种多样，支持多种框架，高度可定制。
安装
Swiper 支持多种框架，比如 Vue 框架，可以通过 NPM 安装。
shell
npm install swiper随后可以在项目中导入。
js
// import Swiper JS
import Swiper from 'swiper';
// import Swiper styles
import 'swiper/css';
const swiper = new Swiper(...);默认情况下，Swiper 仅导出核心版本，没有附加模块（如导航、分页等）。因此我们还需要导入并配置它们：
js
// core version + navigation, pagination modules:
import Swiper from 'swiper';
import { Navigation, Pagination } from 'swiper/modules';
// import Swiper and modules styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
// init Swiper:
const swiper = new Swiper('.swiper', {
// configure Swiper to use modules
modules: [Navigation, Pagination],
...
});除 NPM 外，还可以通过直接引入 JS。
html
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>或：
html
<link rel="stylesheet"
href="https://static.qi1.website/css/swiper.css"/>
<script src="https://static.qi1.website/css/swiper.js"></script>Swiper 包可以本地化，可前往 https://www.jsdelivr.com/package/npm/swiper 下载。
使用 - 基本使用
首先先添加一个基础的 HTML 结构。
html
<!-- 幻灯片主容器 -->
<div class="swiper">
<!-- 其他必需的包装器 -->
<div class="swiper-wrapper">
<!-- 幻灯片 -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- 如果我们需要分页 -->
<div class="swiper-pagination"></div>
<!-- 如果我们需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果我们需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>然后限制下最顶层容器的宽高。
css
.swiper {
width: 600px;
height: 300px;
}最后初始化 Swiper。
js
const swiper = new Swiper('.swiper', {
// 可选参数
direction: 'vertical',
loop: true,
// 如果我们需要分页
pagination: {
el: '.swiper-pagination',
},
// 导航箭头
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果我们需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
});Swiper 实例 - 初始化
页面有滑块的代码时，使用以下代码初始化 Swiper 。
new Swiper(swiperContainer, parameters)
- swiperContainer - swiper 的容器 HTML 元素的 HTMLElement 或 string（使用CSS命名），必选
- parameters - object - 带有 Swiper 参数的对象，可选
- 方法返回初始化的 Swiper 实例
举例来说：
js
const swiper = new Swiper('.swiper', {
speed: 400,
spaceBetween: 100,
});初始化 Swiper 后，就可以在其 HTMLElement 上访问 Swiper 的实例。它是 Swiper 的 HTML 容器元素的 swiper 属性：
js
const swiper = document.querySelector('.swiper').swiper;
// 可以调用 swiper 的函数
swiper.slideNext();Swiper 实例 - 初始化参数
以下文档来源于网上流传的 “Swiper 中文网”，貌似都是直译，请自行辨别。
Swiper 可选参数。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| allowSlideNext | boolean | true | 设置为false以禁用滑动到下一个滑动方向（向右或向下） |
| allowSlidePrev | boolean | true | 设置为false以禁用滑动到上一个滑动方向（向左或向上） |
| allowTouchMove | boolean | true | 如果为false，则切换幻灯片的唯一方法是使用外部API函数，如slidePrev或slideNext |
| autoHeight | boolean | false | 设置为true，滑块包装器将根据当前活动滑块的高度调整其高度 |
| breakpoints | object | 允许为不同的响应断点（屏幕大小）设置不同的参数。并非所有参数都可以在断点中更改，只有那些不需要不同布局和逻辑的参数才能更改，如SlideService、slidesPerGroup、spaceBetween、grid.rows。像循环和效果这样的参数将不起作用 | |
| breakpointsBase | string | 'window' | 断点基数（beta）。可以是窗口或容器。如果设置为窗口（默认），则断点键表示窗口宽度。如果设置为container，则断点键视为swiper container width，不受Swiper Angular、React、Svelte和Vue组件的支持 |
| centerInsufficientSlides | boolean | false | 启用后，如果幻灯片数量小于SlideService，则它会将幻灯片居中。不打算用于循环模式和grid.rows |
| centeredSlides | boolean | false | 如果为true，则活动幻灯片将居中，而不总是在左侧。 |
| centeredSlidesBounds | boolean | false | 如果为true，则活动滑块将居中，而不会在滑块的开始和结束处添加间隙。必需的centeredSlides:true。不用于循环或分页 |
| containerModifierClass | string | 'swiper-' | 可以根据不同参数添加到swiper容器的修饰符CSS类的开头 |
| createElements | boolean | false | 启用后，Swiper将自动使用Swiper包装器元素包装幻灯片，并将创建导航、分页和滚动条所需的元素。这些元素已启用（使用各自的params对象或布尔true）） |
| cssMode | boolean | false | 启用后，它将使用现代CSS滚动捕捉API。它不支持Swiper的所有功能，但在简单配置中可能会带来更好的性能。这是启用时不支持的内容：立方体和卡片效果; 速度参数可能没有影响; 所有与转换开始/结束相关的事件（改用slideChange）; slidesPerGroup支持有限; simulateTouch没有效果，用鼠标“拖动”也不起作用; 阻力没有任何影响; 允许滑动上一个/下一个; swipeHandler公司; freeMode和所有相关功能 |
| direction | 'horizontal'或'vertical' | 'horizontal' | 可以是“水平”或“垂直”（用于垂直滑块）。 |
| edgeSwipeDetection | string | boolean | false |
| edgeSwipeThreshold | number | 20 | 屏幕左边缘的区域（像素），用于释放触摸事件以在应用程序中刷回 |
| effect | 'slide' 或 'fade' 或 'cube' 或 'coverflow' 或 'flip' 或 'creative' 或 'cards' | 'slide' | 过渡效应。可以是“幻灯片”、“渐变”、“立方体”、“coverflow”、“flip”或“creative” |
| enabled | boolean | true | 是否最初启用Swiper。当Swiper被禁用时，它将隐藏所有导航元素，并且不会响应任何事件和交互 |
| focusableElements | String | 'input, select, option, textarea, button, video, label' | 可聚焦元素的CSS选择器。如果这些元素“集中”，则将禁用对其进行刷卡 |
| followFinger | boolean | true | 如果禁用，则只有当您松开滑块时，滑块才会设置动画，当您将手指放在滑块上时，滑块不会移动 |
| grabCursor | boolean | false | 这个选项可能会稍微提高桌面的可用性。如果为true，用户将在鼠标悬停在Swiper上时看到“抓取”光标 |
| height | null 或 number | null | swiper高度（px）。参数允许强制滑动高度。仅当您在隐藏时初始化Swiper，并且在SSR和测试环境中正确初始化Swiper时才有用(前提是参数未设置响应式) |
| width | null 或 number | null | swiper宽度（像素）。参数允许强制滑动宽度。仅当您在隐藏时初始化Swiper，并且在SSR和测试环境中正确初始化Swiper时才有用 |
| init | boolean | true | 创建实例时是否应自动初始化Swiper。如果已禁用，则需要通过调用swiper.init（）手动初始化它 |
| initialSlide | number | 0 | 初始幻灯片的索引编号。 |
| longSwipes | boolean | true | 如果要禁用长刷，请设置为false |
| longSwipesMs | number | 300 | 在长时间滑动期间触发滑动到下一张/上一张幻灯片的最短持续时间（毫秒） |
| longSwipesRatio | number | 0.5 | 长滑动期间触发滑动到下一张/上一张幻灯片的比率 |
| loop | boolean | false | 设置为true以启用连续循环模式 由于循环模式的工作性质，它将添加重复的幻灯片。此类复制幻灯片将包含其他类：swiper slide duplicate-表示重复的幻灯片,swiper slide duplicate active-表示复制到当前活动幻灯片的幻灯片,swiper slide duplicate next-表示复制到活动幻灯片旁边的幻灯片,swiper slide duplicate prev-表示复制到激活前一张幻灯片的幻灯片 |
| loopAdditionalSlides | number | 0 | 添加创建循环后将克隆的幻灯片数 |
| loopFillGroupWithBlank | boolean | false | 启用和循环模式将用空白幻灯片填充幻灯片数量不足的组。很适合与slidesPerGroup参数一起使用 |
| loopPreventsSlide | boolean | true | 启用后，当转换已在进行时，它可以防止滑动前/下一个转换（在启用循环时生效） |
| loopedSlides | null 或 number | null | 如果您使用SlideService查看：“自动”和循环模式，您应该告诉Swiper使用此参数应该循环（复制）多少张幻灯片 |
| loopedSlidesLimit | boolean | true | 启用后，复制的幻灯片数量将不会超过原始幻灯片的数量。当每个视图中有很多幻灯片而原始幻灯片数量不足时，禁用和增加循环幻灯片非常有用 |
| maxBackfaceHiddenSlides | boolean | true | 启用后，复制的幻灯片数量将不会超过原始幻灯片的数量。当中有很多幻灯片而原始幻灯片数量不足时，禁用和增加循环幻灯片非常有用 |
| modules | SwiperModule[] | Swiper数组 | |
| nested | boolean | false | 在Swiper上设置为true以正确拦截触摸事件。仅适用于与上级方向相同的刷子 |
| noSwiping | boolean | true | 启用/禁用在与noSwipingClass中指定的类匹配的元素上滑动 |
| noSwipingClass | string | 'swiper-no-swiping' | 在css类中指定noSwiping的元素 |
| noSwipingSelector | string | 可以用来代替NoSwippingClass来指定要禁用滑动的元素。例如，“input”将禁用对所有输入的滑动 | |
| normalizeSlideIndex | boolean | true | 标准化幻灯片索引。 |
| observeParents | boolean | false | 如果您还需要监视Swiper父元素的突变，请设置为true |
| observeSlideChildren | boolean | false | 如果还需要观察滑动子元素的突变，请将其设置为true |
| observer | boolean | false | 设置为true以启用Swiper及其元素上的变异观察者。在这种情况下，如果您每次更改Swiper的样式（如隐藏/显示）或修改其子元素（如添加/删除幻灯片），Swiper都将更新（重新初始化） |
| on | object | true | 注册事件 |
| passiveListeners | boolean | true | 默认情况下，将使用被动事件侦听器来提高移动设备上的滚动性能。但是如果您需要使用e.preventDefault，并且与它有冲突，那么您应该禁用此参数 |
| preloadImages | boolean | true | 启用后，Swiper将强制加载所有图像 |
| preventClicks | boolean | true | 设置为true可防止在刷卡过程中意外点击链接 |
| preventClicksPropagation | boolean | true | 设置为true可在刷卡期间停止链接上的单击事件传播 |
| preventInteractionOnTransition | boolean | false | 启用后，它将不允许在转换期间通过滑动或导航/分页按钮更改幻灯片 |
| resistance | boolean | true | 如果要禁用阻力边界，请设置为false |
| resistanceRatio | number | 0.85 | 此选项允许您控制电阻比 |
| resizeObserver | boolean | true | 启用后，它将在swiper容器上使用ResizeObserver（如果浏览器支持）来检测容器大小（而不是观察窗口大小） |
| rewind | boolean | false | 设置为true以启用“倒带”模式。启用后，在上一张幻灯片上单击“下一步”导航按钮（或调用.slideNext()）将滑回第一张幻灯片。在第一张幻灯片上单击“上一页”导航按钮（或调用.slidePrev()）将向前滑动到最后一张幻灯片。 |
| roundLengths | boolean | false | 设置为true可对幻灯片宽度和高度值进行四舍五入，以防止在常用分辨率屏幕上出现模糊文本（如果您有） |
| runCallbacksOnInit | boolean | true | swiper初始化上的Fire Transition/SlideChange/Start/End事件。如果initialSlide不是0，或者您使用循环模式，则在初始化时将触发此类事件 |
| setWrapperSize | boolean | false | 启用此选项后，插件将swiper包装上的宽度/高度设置为等于所有幻灯片的总大小。对于不太支持flexbox布局的浏览器，大多数情况下应该用作兼容性回退选项 |
| shortSwipes | boolean | true | 如果要禁用短刷，请设置为false |
| simulateTouch | boolean | true | 如果为true，Swiper将接受鼠标事件，如触摸事件（单击并拖动以更改幻灯片） |
| slideActiveClass | string | 'swiper-slide-active' | 当前活动幻灯片的CSS类名 |
| slideBlankClass | string | 'swiper-slide-invisible-blank' | 还启用loopFillGroupWithBlank时，空白幻灯片的CSS类名附加到循环模式下的填充组 |
| slideClass | string | 'swiper-slide' | 幻灯片的CSS类名 |
| slideDuplicateActiveClass | string | 'swiper-slide-duplicate-active' | 表示当前活动幻灯片的CSS类名 |
| slideDuplicateClass | string | 'swiper-slide-duplicate' | 循环模式复制的幻灯片的CSS类名 |
| slideDuplicateNextClass | string | 'swiper-slide-duplicate-next' | 幻灯片的CSS类名，表示活动幻灯片下一个的幻灯片 |
| slideDuplicatePrevClass | string | 'swiper-slide-duplicate-prev' | 幻灯片的CSS类名，表示活动幻灯片之前的幻灯片 Swiper Angular/React/Svelte/Vue中不支持 |
| slideNextClass | string | 'swiper-slide-next' | 位于当前活动幻灯片之后幻灯片的CSS类名 |
| slidePrevClass | string | 'swiper-slide-prev' | 位于当前活动幻灯片之前幻灯片的CSS类名 |
| slideToClickedSlide | boolean | false | 设置为true并单击任何幻灯片都会转换到此幻灯片 |
| slideVisibleClass | string | 'swiper-slide-visible' | 当前可见幻灯片的CSS类名 |
| slidesOffsetAfter | number | 0 | 在容器末端添加（以像素为单位）额外的幻灯片偏移量（在所有幻灯片之后） |
| slidesOffsetBefore | number | 0 | 在容器的开头（在所有幻灯片之前）添加（以像素为单位）额外的幻灯片偏移量 |
| slidesPerGroup | number | 1 | 设置幻灯片数量以定义和启用组幻灯片。可用于SlideService>1 |
| slidesPerGroupAuto | boolean | false | 此参数仅用于SlideService:“auto”和slidesPerGroup:1。启用后，它将跳过视图中.slideNext()和.slidePrev()方法调用、导航“按钮”单击和自动播放中的所有幻灯片。 |
| slidesPerGroupSkip | number | 0 | 该参数的工作方式如下：如果slidesPerGroupSkip等于0（默认值），则不会从分组中排除任何幻灯片，并且结果行为与没有此更改的情况相同。 |
| slidesPerView | number 或 'auto' | 1 | 每个视图的幻灯片数（滑块容器上同时可见的幻灯片）。 |
| spaceBetween | number | 0 | 载玻片之间的距离，单位为px。 |
| speed | number | 300 | 幻灯片之间的转换持续时间（毫秒） |
| swipeHandler | null 或 CSSSelector 或 HTMLElement | null | 带有CSS选择器的字符串或带有分页的容器的HTML元素，该元素将作为唯一可用的刷卡处理程序 |
| threshold | number | 0 | 阈值，以px为单位。如果“触摸距离”低于此值，则刷卡器将不会移动 |
| touchAngle | number | 45 | 触发触摸移动的允许角度（以度为单位） |
| touchEventsTarget | 'container' 或 'wrapper' | 'wrapper' | 监听触摸事件的目标元素。可以是“容器”（监听swiper上的触摸事件）或“包装器”（监听Swiber包装器上的触摸活动） |
| touchMoveStopPropagation | boolean | false | 如果启用，则“touchmove”的传播将停止 |
| touchRatio | number | 1 | 接触比 |
| touchReleaseOnEdges | boolean | false | 启用在滑块边缘位置（开始、结束）上释放触摸事件，以允许进一步滚动页面 |
| touchStartForcePreventDefault | boolean | false | 强制始终防止touchstart（pointerdown）事件的默认设置 |
| touchStartPreventDefault | boolean | true | 如果禁用，则不会阻止touchstart（pointerdown）事件 |
| uniqueNavElements | boolean | true | 如果启用（默认）并将导航元素的参数作为字符串传递（如“.pagination”），则Swiper将首先通过子元素查找此类元素。适用于分页、上一页/下一页按钮和滚动条元素 |
| updateOnImagesReady | boolean | true | 启用时，在加载所有内部图像（标记）后，将重新初始化Swiper。所需预加载图像：true |
| updateOnWindowResize | boolean | true | 滑动器将重新计算幻灯片在窗口上的位置，调整大小（方向更改） |
| url | null 或 string | null | 在服务器端渲染并启用历史记录时，需要进行活动幻灯片检测 |
| userAgent | null 或 string | null | userAgent字符串。在服务器端渲染时，需要进行浏览器/设备检测 |
| virtualTranslate | boolean | false | 启用此选项，swiper将照常操作，除非它不会移动，包装器上的实际转换值将不会设置。当您可能需要创建自定义幻灯片过渡时非常有用 |
| watchOverflow | boolean | true | 启用时，将禁用Swiper，并在没有足够的幻灯片可供滑动的情况下隐藏导航按钮。 |
| watchSlidesProgress | boolean | false | 启用此功能可计算每张幻灯片的进度和可见性（视口中的幻灯片将具有其他可见类） |
| wrapperClass | string | 'swiper-wrapper' | 幻灯片包装器的CSS类名 |
| onAny | function | 添加将对所有事件触发的事件侦听器 |
Swiper 实例 - 属性
初始化滑块后，我们将其初始化实例放入变量中（如上面示例中的swiper变量），并提供有用的属性：
| 属性 | 返回类型 | 描述 |
|---|---|---|
| swiper.$el | Dom7Array | 带有滑块容器 HTML 元素的 Dom 元素。 |
| swiper.$wrapperEl | Dom7Array | 带有滑块包装器 HTML 元素的 Dom 元素。 |
| swiper.activeIndex | number | 当前活动幻灯片的索引号 |
| swiper.allowSlideNext | boolean | 通过将此属性指定为false/true，禁用/启用滑动到下一张幻灯片的功能 |
| swiper.allowSlidePrev | boolean | 通过将此属性指定为false/true，禁用/启用滑动到上一张幻灯片的功能 |
| swiper.allowTouchMove | boolean | 禁用/启用通过鼠标抓取滑块移动滑块的能力，或通过将此属性指定为false/true（在触摸屏上）通过手指触摸滑块移动滑块 |
| swiper.animating | boolean | 如果swiper处于转换状态，则为true |
| swiper.clickedIndex | number | 上次单击的幻灯片的索引号 |
| swiper.clickedSlide | HTMLElement | 链接到上次单击的幻灯片（HTMLElement） |
| swiper.el | HTMLElement | 滑块容器HTML元素 |
| swiper.height | number | 滑块容器高度 |
| swiper.isBeginning | boolean | 如果滑块位于最“左”/“顶”位置，则为真 |
| swiper.isEnd | boolean | 如果滑块位于最“右侧”/“底部”位置，则为真 |
| swiper.originalParams | SwiperOptions | 具有原始初始化参数的对象 |
| swiper.params | SwiperOptions | 具有传递的初始化参数的对象 |
| swiper.previousIndex | number | 以前活动幻灯片的索引号 |
| swiper.progress | number | 已完成包装器转换的当前进度（从0到1） |
| swiper.realIndex | number | 循环模式下考虑重复幻灯片的当前活动幻灯片索引数 |
| swiper.slides | Dom7Array | Dom7类似数组的幻灯片HTML元素集合。要获取特定的幻灯片元素，请使用swiper.slide |
| swiper.snapGrid | number[] | 滑动捕捉网格 |
| swiper.snapIndex | number | 当前管理单元snapGrid的索引号 |
| swiper.touches | object | 具有以下触摸事件属性的对象：swiper.touches.startX,swiper.touches.startY,swiper.touches.currentX,swiper.touches.currentY,swiper.touches.diff |
| swiper.translate | number | 包装器转换的当前值 |
| swiper.width | number | 容器宽度 |
| swiper.wrapperEl | HTMLElement | 包装器HTML元素 |
| swiper.defaults | SwiperOptions | Swiper默认选项 |
| swiper.extendedDefaults | SwiperOptions | 具有全局Swiper扩展选项的对象 |
Swiper 实例 - 方法
初始化滑块后，我们将其初始化实例放入变量中（如上面示例中的swiper变量），并提供有用的方法：
| 方法 | 描述 |
|---|---|
| swiper.attachEvents() | 再次将所有事件附加到侦听器 |
| swiper.changeDirection(direction, needUpdate) | 将滑块方向从水平更改为垂直并向后。方向-‘horizontal’或‘vertical’-更新方向。如果未指定，则将自动更改为相反方向，needUpdate-boolean-将调用swiper.update（）。默认为true |
| swiper.changeLanguageDirection(direction) | 滑块语言的更改，direction-“rtl” |
| swiper.destroy(deleteInstance, cleanStyles) | 销毁滑块实例并分离所有事件侦听器 |
| swiper.detachEvents() | 分离侦听器中的所有事件 |
| swiper.disable() | 禁用Swiper（如果已启用）。禁用Swiper时，它将隐藏所有导航元素，不会响应任何事件和交互 |
| swiper.emit(event, args) | 实例上的火灾事件 |
| swiper.enable() | 启用Swiper（如果已禁用） |
| swiper.getTranslate() | 获取swiper包装器css3 transform translate的当前值 |
| swiper.init(el) | 初始化滑块 |
| swiper.loopCreate() | |
| swiper.loopDestroy() | |
| swiper.off(event, handler) | 删除事件处理程序 |
| swiper.offAny(handler) | 删除将对所有事件触发的事件侦听器 |
| swiper.on(event, handler) | 添加事件处理程序 |
| swiper.onAny(handler) | 添加将对所有事件触发的事件侦听器 |
| swiper.once(event, handler) | 添加在触发后将被删除的事件处理程序 |
| swiper.setGrabCursor() | 设置抓取光标 |
| swiper.setProgress(progress, speed) | 设置Swiper转换进度（从0到1）。其中0-第一张幻灯片上的初始位置（偏移），1-最后一张幻灯片上最大位置（偏移），progress-数字-刷卡器转换进度（从0到1）。speed-数量-转换持续时间（毫秒）。 |
| swiper.setTranslate(translate) | 为swiper包装器设置自定义css3转换的translate值 |
| swiper.slideNext(speed, runCallbacks) | 运行过渡到下一张幻灯片。speed-数量-转换持续时间（毫秒）。runCallbacks-boolean-将其设置为false（默认为true），转换将不会产生转换事件。 |
| swiper.slidePrev(speed, runCallbacks) | 运行到上一张幻灯片的过渡。 |
| swiper.slideReset(speed, runCallbacks) | |
| swiper.slideTo(index, speed, runCallbacks) | |
| swiper.slideToClosest(speed, runCallbacks) | |
| swiper.slideToLoop(index, speed, runCallbacks) | |
| swiper.translateTo(translate, speed, runCallbacks, translateBounds) | |
| swiper.unsetGrabCursor() | 取消设置抓取光标 |
| swiper.update() | 您应该在手动添加/删除幻灯片、隐藏/显示幻灯片或使用Swiper进行任何自定义DOM修改后调用该方法。该方法还包括以下方法的子类，您可以单独使用： |
| swiper.updateAutoHeight(speed) | 强制滑动器更新其高度（启用自动高度时），持续时间等于“速度”参数,speed-number-转换持续时间（毫秒）。 |
| swiper.updateProgress() | 重新计算swiper进度 |
| swiper.updateSize() | 重新计算swiper容器的大小 |
| swiper.updateSlides() | 重新计算幻灯片数量及其偏移。使用JavaScript添加/删除幻灯片后非常有用 |
| swiper.updateSlidesClasses() | 更新幻灯片和项目符号上的活动/上一个/下一个类 |
| swiper.extendDefaults(options) | 扩展全局Swiper默认值 |
| swiper.use(modules) | 在运行时在Swiper上安装模块。 |
Swiper 实例 - 事件
Swiper提供了一系列有用的活动，您可以收听。事件可以通过两种方式分配：
1.在swiper初始化时使用on参数：
javascript
const swiper = new Swiper('.swiper', {
// ...
on: {
init: function () {
console.log('swiper initialized');
},
},
});2.在swiper初始化后使用on方法。
javascript
const swiper = new Swiper('.swiper', {
// ...
});
swiper.on('slideChange', function () {
console.log('slide changed');
});注意：事件处理程序中的该关键字始终指向Swiper实例。
| 名称 | 参数 | 描述 |
|---|---|---|
| activeIndexChange | (swiper) | 事件将在活动索引更改时触发 |
| afterInit | (swiper) | 事件将在初始化后立即触发 |
| beforeDestroy | (swiper) | 事件将在Swiper销毁之前立即触发 |
| beforeInit | (swiper) | 事件将在初始化之前立即触发 |
| beforeLoopFix | (swiper) | 事件将在“循环修复”之前触发 |
| beforeResize | (swiper) | 事件将在调整处理程序大小之前触发 |
| beforeSlideChangeStart | (swiper) | 此事件将在幻灯片更改转换开始之前触发 |
| beforeTransitionStart | (swiper, speed, internal) | 此事件将在转换开始之前触发 |
| breakpoint | (swiper, breakpointParams) | 事件将在断点更改时触发 |
| changeDirection | (swiper) | 事件将在方向改变时触发 |
| click | (swiper, event) | 当用户单击/轻触Swiper时，将触发事件。接收touchend事件作为参数。 |
| destroy | (swiper) | 事件将在swiper销毁时触发 |
| doubleClick | (swiper, event) | 当用户双击/轻触Swiper时将触发事件 |
| doubleTap | (swiper, event) | 当用户双击Swiper的容器时，将触发此事件。接收touchend事件作为参数 |
| fromEdge | (swiper) | 当Swiper从起始位置或结束位置移动时，将触发事件 |
| imagesReady | (swiper) | 事件将在加载所有内部映像后立即触发。还应启用updateOnImagesReady |
| init | (swiper) | Swiper初始化后立即触发 |
| lock | (swiper) | 锁定swiper时（启用watchOverflow时）将触发事件 |
| loopFix | (swiper) | 事件将在“"loop fix”后触发 |
| momentumBounce | (swiper) | 该活动将在动量反弹时启动 |
| observerUpdate | (swiper) | 如果启用了observer并检测到DOM突变，则将触发事件 |
| orientationchange | (swiper) | 方向改变时将触发事件（如横向->纵向） |
| progress | (swiper, progress) | 当Swiper progress更改时，事件将被触发，作为参数，它接收始终从0到1的进度 |
| reachBeginning | (swiper) | 当滑动器到达其起始位置（初始位置）时，将触发事件 |
| reachEnd | (swiper) | 当滑水器到达最后一张幻灯片时，将触发事件 |
| realIndexChange | (swiper) | 事件将在实际索引更改时触发 |
| resize | (swiper) | 事件将在swiper的onresize操作之前触发 |
| setTransition | (swiper, translate) | 每次swiper启动动画时都会触发此事件。接收当前转换持续时间（毫秒）作为参数 |
| setTranslate | (swiper, translate) | 当swiper的包装器更改其位置时，将触发事件。接收当前转换值作为参数 |
| slideChange | (swiper) | 当前活动幻灯片更改时将触发事件 |
| slideChangeTransitionEnd | (swiper) | 事件将在动画播放到其他幻灯片（下一张或上一张）后触发。 |
| slideChangeTransitionStart | (swiper) | 事件将在动画开始时激发到其他幻灯片（下一张或上一张）。 |
| slideNextTransitionEnd | (swiper) | 与“slideChangeTransitionEnd”相同，但仅适用于“向前”方向 |
| slideNextTransitionStart | (swiper) | 与“slideChangeTransitionStart”相同，但仅适用于“前进”方向 |
| slidePrevTransitionEnd | (swiper) | 与“slideChangeTransitionEnd”相同，但仅适用于“向后”方向 |
| slidePrevTransitionStart | (swiper) | 与“slideChangeTransitionStart”相同，但仅适用于“向后”方向 |
| slideResetTransitionEnd | (swiper) | 事件将在将幻灯片重置为当前幻灯片的动画结束时触发 |
| slideResetTransitionStart | (swiper) | 事件将在将幻灯片重置为当前幻灯片的动画开始时触发 |
| sliderFirstMove | (swiper, event) | 事件将在第一次触摸/拖动移动时触发 |
| sliderMove | (swiper, event) | 当用户触摸并移动手指到刷子上并移动它时，将触发事件。接收touchmove事件作为参数。 |
| slidesGridLengthChange | (swiper) | 事件将在幻灯片网格更改时触发 |
| slidesLengthChange | (swiper) | 当幻灯片数量发生变化时，将触发事件 |
| snapGridLengthChange | (swiper) | 事件将在捕捉网格发生更改时触发 |
| snapIndexChange | (swiper) | 事件将在快照索引更改时触发 |
| tap | (swiper, event) | 当用户单击/轻触Swiper时，将触发事件。接收touchend事件作为参数。 |
| toEdge | (swiper) | 当Swiper移动到开始或结束位置时，将触发事件 |
| touchEnd | (swiper, event) | 用户释放Swiper时将触发事件。接收touchend事件作为参数。 |
| touchMove | (swiper, event) | 当用户在刷卡器上触摸并移动手指时，将触发事件。接收touchmove事件作为参数。 |
| touchMoveOpposite | (swiper, event) | 当用户按与方向参数相反的方向在刷子上触摸并移动手指时，将触发事件。接收touchmove事件作为参数。 |
| touchStart | (swiper, event) | 当用户触摸刷卡器时将触发事件。接收touchstart事件作为参数。 |
| transitionEnd | (swiper) | 事件将在转换后触发。 |
| transitionStart | (swiper) | 事件将在转换开始时触发。 |
| unlock | (swiper) | 解锁swiper时（启用watchOverflow时）将触发事件 |
| update | (swiper) | 事件将在刷卡后触发。update()调用 |
更多文档请前往 官网 阅读。