# Swiper API

# Swiper完整HTML布局

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

# Swiper Styles样式

Swiper可以支持使用不同的CSSLessSCSS样式:

# CSS样式

CSS 样式 bundle 版本:

swiper-bundle.css - 所有Swiper样式,包括所有模块样式(如导航、分页等) swiper-bundle.min.css - 同上的压缩版

CSS 样式 bundle version (模块包导入 ):

swiper/css - 所有Swiper样式,包括所有模块样式(如导航、分页等) swiper/css/bundle - 同上的压缩版

core核心版和模块的CSS 样式 (package imports):

  • swiper/css - Swiper core核心版
  • swiper/css/a11y - A11y模块样式
  • swiper/css/autoplay - Autoplay自动播放模块样式
  • swiper/css/controller - Controller控制模块样式
  • swiper/css/effect-cards - Cards Effect卡片特效模块样式
  • swiper/css/effect-coverflow - Coverflow Effect覆盖流特效模块样式
  • swiper/css/effect-creative - Creative Effect创意特效模块样式
  • swiper/css/effect-cube - Cube Effect立体特效模块样式
  • swiper/css/effect-fade - Fade Effect渐变模块样式
  • swiper/css/effect-flip - Flip Effect翻转模块样式
  • swiper/css/free-mode - Free自由模块样式
  • swiper/css/grid - Grid网格模块样式
  • swiper/css/hash-navigation - Hash Navigation哈斯导航模块样式
  • swiper/css/history - History module历史模块样式
  • swiper/css/keyboard - Keyboard键盘模块样式
  • swiper/css/lazy - Lazy懒加载模块样式
  • swiper/css/manipulation - Manipulation操作模块样式
  • swiper/css/mousewheel - Mousewheel鼠标滚动样式
  • swiper/css/navigation - Navigation导航模块样式
  • swiper/css/pagination - Pagination分页模块样式
  • swiper/css/parallax - Parallax视差模块样式
  • swiper/css/scrollbar - Scrollbar滚动条样式
  • swiper/css/thumbs - Thumbs缩略图模式
  • swiper/css/virtual - Virtual虚拟模块样式
  • swiper/css/zoom - Zoom放大模块样式

# Less样式

Less样式是用于核心版本和模块的独立样式(包导入):

  • swiper/css - Swiper core核心版
  • swiper/css/a11y - A11y模块样式
  • swiper/css/autoplay - Autoplay自动播放模块样式
  • swiper/css/controller - Controller控制模块样式
  • swiper/css/effect-cards - Cards Effect卡片特效模块样式
  • swiper/css/effect-coverflow - Coverflow Effect覆盖流特效模块样式
  • swiper/css/effect-creative - Creative Effect创意特效模块样式
  • swiper/css/effect-cube - Cube Effect立体特效模块样式
  • swiper/css/effect-fade - Fade Effect渐变模块样式
  • swiper/css/effect-flip - Flip Effect翻转模块样式
  • swiper/css/free-mode - Free自由模块样式
  • swiper/css/grid - Grid网格模块样式
  • swiper/css/hash-navigation - Hash Navigation哈斯导航模块样式
  • swiper/css/history - History module历史模块样式
  • swiper/css/keyboard - Keyboard键盘模块样式
  • swiper/css/lazy - Lazy懒加载模块样式
  • swiper/css/manipulation - Manipulation操作模块样式
  • swiper/css/mousewheel - Mousewheel鼠标滚动样式
  • swiper/css/navigation - Navigation导航模块样式
  • swiper/css/pagination - Pagination分页模块样式
  • swiper/css/parallax - Parallax视差模块样式
  • swiper/css/scrollbar - Scrollbar滚动条样式
  • swiper/css/thumbs - Thumbs缩略图模式
  • swiper/css/virtual - Virtual虚拟模块样式
  • swiper/css/zoom - Zoom放大模块样式

# SCSS样式

SCSS样式也是用于核心版本和模块(包导入)的独立样式:

  • swiper/css - Swiper core核心版
  • swiper/css/a11y - A11y模块样式
  • swiper/css/autoplay - Autoplay自动播放模块样式
  • swiper/css/controller - Controller控制模块样式
  • swiper/css/effect-cards - Cards Effect卡片特效模块样式
  • swiper/css/effect-coverflow - Coverflow Effect覆盖流特效模块样式
  • swiper/css/effect-creative - Creative Effect创意特效模块样式
  • swiper/css/effect-cube - Cube Effect立体特效模块样式
  • swiper/css/effect-fade - Fade Effect渐变模块样式
  • swiper/css/effect-flip - Flip Effect翻转模块样式
  • swiper/css/free-mode - Free自由模块样式
  • swiper/css/grid - Grid网格模块样式
  • swiper/css/hash-navigation - Hash Navigation哈斯导航模块样式
  • swiper/css/history - History module历史模块样式
  • swiper/css/keyboard - Keyboard键盘模块样式
  • swiper/css/lazy - Lazy懒加载模块样式
  • swiper/css/manipulation - Manipulation操作模块样式
  • swiper/css/mousewheel - Mousewheel鼠标滚动样式
  • swiper/css/navigation - Navigation导航模块样式
  • swiper/css/pagination - Pagination分页模块样式
  • swiper/css/parallax - Parallax视差模块样式
  • swiper/css/scrollbar - Scrollbar滚动条样式
  • swiper/css/thumbs - Thumbs缩略图模式
  • swiper/css/virtual - Virtual虚拟模块样式
  • swiper/css/zoom - Zoom放大模块样式

# Swiper初始化

现在,当我们有Swiper的HTML时,我们需要使用以下函数初始化:

新版Swiper(swiperContainer, parameters)- 初始化及参数

  • swiperContainer - HTML元素或字符串(css选择器)
  • parameters - 对象
  • 方法返回初始化的Swiper实例 比如:
const swiper = new Swiper('.swiper', {
  speed: 400,
  spaceBetween: 100,
});

初始化Swiper后,可以在其HTMLElement上访问Swiper的实例。它是swiper的HTML容器元素的swiper属性:

const swiper = document.querySelector('.swiper').swiper;

// Now you can use all slider methods like
swiper.slideNext();

# Swiper参数

Swiper参数可用列表:

名称 类型 默认值 描述
allowSlideNext boolean true 设置为false以禁用滑动到下一个滑动方向(向右或向下)
allowSlidePrev boolean true 设置为false以禁用滑动到上一个滑动方向(向左或向上)
allowTouchMove boolean true 如果为false,则切换幻灯片的唯一方法是使用外部API函数,如slidePrevslideNext
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.$el Dom7Array 带有滑块容器HTML元素的Dom7元素。要获得香草HTMLElement,请使用swiper.el
swiper.$wrapperEl Dom7Array 带有滑块包装器HTML元素的Dom7元素。要获得vanilla Htmlement,请使用swiper.wrapperEl
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.slides[1]
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.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) xxxx
swiper.slideTo(index, speed, runCallbacks) xxxx
swiper.slideToClosest(speed, runCallbacks) xxxx
swiper.slideToLoop(index, speed, runCallbacks) xxxx
swiper.translateTo(translate, speed, runCallbacks, translateBounds) xxxx
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提供了一系列有用的活动,您可以收听。事件可以通过两种方式分配: 1.在swiper初始化时使用on参数:

const swiper = new Swiper('.swiper', {
  // ...
  on: {
    init: function () {
      console.log('swiper initialized');
    },
  },
});

2.在swiper初始化后使用on方法。

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()调用