主题
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()调用 |
更多文档请前往 官网 阅读。