Skip to content

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 可选参数。

名称类型默认值描述
allowSlideNextbooleantrue设置为false以禁用滑动到下一个滑动方向(向右或向下)
allowSlidePrevbooleantrue设置为false以禁用滑动到上一个滑动方向(向左或向上)
allowTouchMovebooleantrue如果为false,则切换幻灯片的唯一方法是使用外部API函数,如slidePrevslideNext
autoHeightbooleanfalse设置为true,滑块包装器将根据当前活动滑块的高度调整其高度
breakpointsobject允许为不同的响应断点(屏幕大小)设置不同的参数。并非所有参数都可以在断点中更改,只有那些不需要不同布局和逻辑的参数才能更改,如SlideService、slidesPerGroup、spaceBetween、grid.rows。像循环和效果这样的参数将不起作用
breakpointsBasestring'window'断点基数(beta)。可以是窗口或容器。如果设置为窗口(默认),则断点键表示窗口宽度。如果设置为container,则断点键视为swiper container width,不受Swiper Angular、React、Svelte和Vue组件的支持
centerInsufficientSlidesbooleanfalse启用后,如果幻灯片数量小于SlideService,则它会将幻灯片居中。不打算用于循环模式和grid.rows
centeredSlidesbooleanfalse如果为true,则活动幻灯片将居中,而不总是在左侧。
centeredSlidesBoundsbooleanfalse如果为true,则活动滑块将居中,而不会在滑块的开始和结束处添加间隙。必需的centeredSlides:true。不用于循环或分页
containerModifierClassstring'swiper-'可以根据不同参数添加到swiper容器的修饰符CSS类的开头
createElementsbooleanfalse启用后,Swiper将自动使用Swiper包装器元素包装幻灯片,并将创建导航、分页和滚动条所需的元素。这些元素已启用(使用各自的params对象或布尔true))
cssModebooleanfalse启用后,它将使用现代CSS滚动捕捉API。它不支持Swiper的所有功能,但在简单配置中可能会带来更好的性能。这是启用时不支持的内容:立方体和卡片效果; 速度参数可能没有影响; 所有与转换开始/结束相关的事件(改用slideChange); slidesPerGroup支持有限; simulateTouch没有效果,用鼠标“拖动”也不起作用; 阻力没有任何影响; 允许滑动上一个/下一个; swipeHandler公司; freeMode和所有相关功能
direction'horizontal'或'vertical''horizontal'可以是“水平”或“垂直”(用于垂直滑块)。
edgeSwipeDetectionstringbooleanfalse
edgeSwipeThresholdnumber20屏幕左边缘的区域(像素),用于释放触摸事件以在应用程序中刷回
effect'slide' 或 'fade' 或 'cube' 或 'coverflow' 或 'flip' 或 'creative' 或 'cards''slide'过渡效应。可以是“幻灯片”、“渐变”、“立方体”、“coverflow”、“flip”或“creative”
enabledbooleantrue是否最初启用Swiper。当Swiper被禁用时,它将隐藏所有导航元素,并且不会响应任何事件和交互
focusableElementsString'input, select, option, textarea, button, video, label'可聚焦元素的CSS选择器。如果这些元素“集中”,则将禁用对其进行刷卡
followFingerbooleantrue如果禁用,则只有当您松开滑块时,滑块才会设置动画,当您将手指放在滑块上时,滑块不会移动
grabCursorbooleanfalse这个选项可能会稍微提高桌面的可用性。如果为true,用户将在鼠标悬停在Swiper上时看到“抓取”光标
heightnull 或 numbernullswiper高度(px)。参数允许强制滑动高度。仅当您在隐藏时初始化Swiper,并且在SSR和测试环境中正确初始化Swiper时才有用(前提是参数未设置响应式)
widthnull 或 numbernullswiper宽度(像素)。参数允许强制滑动宽度。仅当您在隐藏时初始化Swiper,并且在SSR和测试环境中正确初始化Swiper时才有用
initbooleantrue创建实例时是否应自动初始化Swiper。如果已禁用,则需要通过调用swiper.init()手动初始化它
initialSlidenumber0初始幻灯片的索引编号。
longSwipesbooleantrue如果要禁用长刷,请设置为false
longSwipesMsnumber300在长时间滑动期间触发滑动到下一张/上一张幻灯片的最短持续时间(毫秒)
longSwipesRationumber0.5长滑动期间触发滑动到下一张/上一张幻灯片的比率
loopbooleanfalse设置为true以启用连续循环模式 由于循环模式的工作性质,它将添加重复的幻灯片。此类复制幻灯片将包含其他类:swiper slide duplicate-表示重复的幻灯片,swiper slide duplicate active-表示复制到当前活动幻灯片的幻灯片,swiper slide duplicate next-表示复制到活动幻灯片旁边的幻灯片,swiper slide duplicate prev-表示复制到激活前一张幻灯片的幻灯片
loopAdditionalSlidesnumber0添加创建循环后将克隆的幻灯片数
loopFillGroupWithBlankbooleanfalse启用和循环模式将用空白幻灯片填充幻灯片数量不足的组。很适合与slidesPerGroup参数一起使用
loopPreventsSlidebooleantrue启用后,当转换已在进行时,它可以防止滑动前/下一个转换(在启用循环时生效)
loopedSlidesnull 或 numbernull如果您使用SlideService查看:“自动”和循环模式,您应该告诉Swiper使用此参数应该循环(复制)多少张幻灯片
loopedSlidesLimitbooleantrue启用后,复制的幻灯片数量将不会超过原始幻灯片的数量。当每个视图中有很多幻灯片而原始幻灯片数量不足时,禁用和增加循环幻灯片非常有用
maxBackfaceHiddenSlidesbooleantrue启用后,复制的幻灯片数量将不会超过原始幻灯片的数量。当中有很多幻灯片而原始幻灯片数量不足时,禁用和增加循环幻灯片非常有用
modulesSwiperModule[]Swiper数组
nestedbooleanfalse在Swiper上设置为true以正确拦截触摸事件。仅适用于与上级方向相同的刷子
noSwipingbooleantrue启用/禁用在与noSwipingClass中指定的类匹配的元素上滑动
noSwipingClassstring'swiper-no-swiping'在css类中指定noSwiping的元素
noSwipingSelectorstring可以用来代替NoSwippingClass来指定要禁用滑动的元素。例如,“input”将禁用对所有输入的滑动
normalizeSlideIndexbooleantrue标准化幻灯片索引。
observeParentsbooleanfalse如果您还需要监视Swiper父元素的突变,请设置为true
observeSlideChildrenbooleanfalse如果还需要观察滑动子元素的突变,请将其设置为true
observerbooleanfalse设置为true以启用Swiper及其元素上的变异观察者。在这种情况下,如果您每次更改Swiper的样式(如隐藏/显示)或修改其子元素(如添加/删除幻灯片),Swiper都将更新(重新初始化)
onobjecttrue注册事件
passiveListenersbooleantrue默认情况下,将使用被动事件侦听器来提高移动设备上的滚动性能。但是如果您需要使用e.preventDefault,并且与它有冲突,那么您应该禁用此参数
preloadImagesbooleantrue启用后,Swiper将强制加载所有图像
preventClicksbooleantrue设置为true可防止在刷卡过程中意外点击链接
preventClicksPropagationbooleantrue设置为true可在刷卡期间停止链接上的单击事件传播
preventInteractionOnTransitionbooleanfalse启用后,它将不允许在转换期间通过滑动或导航/分页按钮更改幻灯片
resistancebooleantrue如果要禁用阻力边界,请设置为false
resistanceRationumber0.85此选项允许您控制电阻比
resizeObserverbooleantrue启用后,它将在swiper容器上使用ResizeObserver(如果浏览器支持)来检测容器大小(而不是观察窗口大小)
rewindbooleanfalse设置为true以启用“倒带”模式。启用后,在上一张幻灯片上单击“下一步”导航按钮(或调用.slideNext())将滑回第一张幻灯片。在第一张幻灯片上单击“上一页”导航按钮(或调用.slidePrev())将向前滑动到最后一张幻灯片。
roundLengthsbooleanfalse设置为true可对幻灯片宽度和高度值进行四舍五入,以防止在常用分辨率屏幕上出现模糊文本(如果您有)
runCallbacksOnInitbooleantrueswiper初始化上的Fire Transition/SlideChange/Start/End事件。如果initialSlide不是0,或者您使用循环模式,则在初始化时将触发此类事件
setWrapperSizebooleanfalse启用此选项后,插件将swiper包装上的宽度/高度设置为等于所有幻灯片的总大小。对于不太支持flexbox布局的浏览器,大多数情况下应该用作兼容性回退选项
shortSwipesbooleantrue如果要禁用短刷,请设置为false
simulateTouchbooleantrue如果为true,Swiper将接受鼠标事件,如触摸事件(单击并拖动以更改幻灯片)
slideActiveClassstring'swiper-slide-active'当前活动幻灯片的CSS类名
slideBlankClassstring'swiper-slide-invisible-blank'还启用loopFillGroupWithBlank时,空白幻灯片的CSS类名附加到循环模式下的填充组
slideClassstring'swiper-slide'幻灯片的CSS类名
slideDuplicateActiveClassstring'swiper-slide-duplicate-active'表示当前活动幻灯片的CSS类名
slideDuplicateClassstring'swiper-slide-duplicate'循环模式复制的幻灯片的CSS类名
slideDuplicateNextClassstring'swiper-slide-duplicate-next'幻灯片的CSS类名,表示活动幻灯片下一个的幻灯片
slideDuplicatePrevClassstring'swiper-slide-duplicate-prev'幻灯片的CSS类名,表示活动幻灯片之前的幻灯片 Swiper Angular/React/Svelte/Vue中不支持
slideNextClassstring'swiper-slide-next'位于当前活动幻灯片之后幻灯片的CSS类名
slidePrevClassstring'swiper-slide-prev'位于当前活动幻灯片之前幻灯片的CSS类名
slideToClickedSlidebooleanfalse设置为true并单击任何幻灯片都会转换到此幻灯片
slideVisibleClassstring'swiper-slide-visible'当前可见幻灯片的CSS类名
slidesOffsetAfternumber0在容器末端添加(以像素为单位)额外的幻灯片偏移量(在所有幻灯片之后)
slidesOffsetBeforenumber0在容器的开头(在所有幻灯片之前)添加(以像素为单位)额外的幻灯片偏移量
slidesPerGroupnumber1设置幻灯片数量以定义和启用组幻灯片。可用于SlideService>1
slidesPerGroupAutobooleanfalse此参数仅用于SlideService:“auto”和slidesPerGroup:1。启用后,它将跳过视图中.slideNext()和.slidePrev()方法调用、导航“按钮”单击和自动播放中的所有幻灯片。
slidesPerGroupSkipnumber0该参数的工作方式如下:如果slidesPerGroupSkip等于0(默认值),则不会从分组中排除任何幻灯片,并且结果行为与没有此更改的情况相同。
slidesPerViewnumber 或 'auto'1每个视图的幻灯片数(滑块容器上同时可见的幻灯片)。
spaceBetweennumber0载玻片之间的距离,单位为px。
speednumber300幻灯片之间的转换持续时间(毫秒)
swipeHandlernull 或 CSSSelector 或 HTMLElementnull带有CSS选择器的字符串或带有分页的容器的HTML元素,该元素将作为唯一可用的刷卡处理程序
thresholdnumber0阈值,以px为单位。如果“触摸距离”低于此值,则刷卡器将不会移动
touchAnglenumber45触发触摸移动的允许角度(以度为单位)
touchEventsTarget'container' 或 'wrapper''wrapper'监听触摸事件的目标元素。可以是“容器”(监听swiper上的触摸事件)或“包装器”(监听Swiber包装器上的触摸活动)
touchMoveStopPropagationbooleanfalse如果启用,则“touchmove”的传播将停止
touchRationumber1接触比
touchReleaseOnEdgesbooleanfalse启用在滑块边缘位置(开始、结束)上释放触摸事件,以允许进一步滚动页面
touchStartForcePreventDefaultbooleanfalse强制始终防止touchstart(pointerdown)事件的默认设置
touchStartPreventDefaultbooleantrue如果禁用,则不会阻止touchstart(pointerdown)事件
uniqueNavElementsbooleantrue如果启用(默认)并将导航元素的参数作为字符串传递(如“.pagination”),则Swiper将首先通过子元素查找此类元素。适用于分页、上一页/下一页按钮和滚动条元素
updateOnImagesReadybooleantrue启用时,在加载所有内部图像(标记)后,将重新初始化Swiper。所需预加载图像:true
updateOnWindowResizebooleantrue滑动器将重新计算幻灯片在窗口上的位置,调整大小(方向更改)
urlnull 或 stringnull在服务器端渲染并启用历史记录时,需要进行活动幻灯片检测
userAgentnull 或 stringnulluserAgent字符串。在服务器端渲染时,需要进行浏览器/设备检测
virtualTranslatebooleanfalse启用此选项,swiper将照常操作,除非它不会移动,包装器上的实际转换值将不会设置。当您可能需要创建自定义幻灯片过渡时非常有用
watchOverflowbooleantrue启用时,将禁用Swiper,并在没有足够的幻灯片可供滑动的情况下隐藏导航按钮。
watchSlidesProgressbooleanfalse启用此功能可计算每张幻灯片的进度和可见性(视口中的幻灯片将具有其他可见类)
wrapperClassstring'swiper-wrapper'幻灯片包装器的CSS类名
onAnyfunction添加将对所有事件触发的事件侦听器

Swiper 实例 - 属性

初始化滑块后,我们将其初始化实例放入变量中(如上面示例中的swiper变量),并提供有用的属性:

属性返回类型描述
swiper.$elDom7Array带有滑块容器 HTML 元素的 Dom 元素。
swiper.$wrapperElDom7Array带有滑块包装器 HTML 元素的 Dom 元素。
swiper.activeIndexnumber当前活动幻灯片的索引号
swiper.allowSlideNextboolean通过将此属性指定为false/true,禁用/启用滑动到下一张幻灯片的功能
swiper.allowSlidePrevboolean通过将此属性指定为false/true,禁用/启用滑动到上一张幻灯片的功能
swiper.allowTouchMoveboolean禁用/启用通过鼠标抓取滑块移动滑块的能力,或通过将此属性指定为false/true(在触摸屏上)通过手指触摸滑块移动滑块
swiper.animatingboolean如果swiper处于转换状态,则为true
swiper.clickedIndexnumber上次单击的幻灯片的索引号
swiper.clickedSlideHTMLElement链接到上次单击的幻灯片(HTMLElement)
swiper.elHTMLElement滑块容器HTML元素
swiper.heightnumber滑块容器高度
swiper.isBeginningboolean如果滑块位于最“左”/“顶”位置,则为真
swiper.isEndboolean如果滑块位于最“右侧”/“底部”位置,则为真
swiper.originalParamsSwiperOptions具有原始初始化参数的对象
swiper.paramsSwiperOptions具有传递的初始化参数的对象
swiper.previousIndexnumber以前活动幻灯片的索引号
swiper.progressnumber已完成包装器转换的当前进度(从0到1)
swiper.realIndexnumber循环模式下考虑重复幻灯片的当前活动幻灯片索引数
swiper.slidesDom7ArrayDom7类似数组的幻灯片HTML元素集合。要获取特定的幻灯片元素,请使用swiper.slide
swiper.snapGridnumber[]滑动捕捉网格
swiper.snapIndexnumber当前管理单元snapGrid的索引号
swiper.touchesobject具有以下触摸事件属性的对象:swiper.touches.startX,swiper.touches.startY,swiper.touches.currentX,swiper.touches.currentY,swiper.touches.diff
swiper.translatenumber包装器转换的当前值
swiper.widthnumber容器宽度
swiper.wrapperElHTMLElement包装器HTML元素
swiper.defaultsSwiperOptionsSwiper默认选项
swiper.extendedDefaultsSwiperOptions具有全局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()调用

更多文档请前往 官网 阅读。

为方便开发而创建的常用库指南