swiper中常用的事件方法

您所在的位置：网站首页 › js常用的绑定点击事件的方法有哪些呢图片 › swiper中常用的事件方法

swiper中常用的事件方法

2023-11-12 20:19| 来源: 网络整理| 查看: 265

通常我们写轮播图都会涉及到swiper这个插件库，但是很多人不知道怎么用，往往踩了很多坑，下面就举一些swiper中常用的事件方法来说：

去下一个slide：

this.mySwiper= new Swiper(".mySwiper", { } this.mySwiper.slideTo(n)

例如：给需要某一dom绑定点击事件，要跳到固定的slide就可使用slideTo 了。

swiper中页面改变事件，就是滑动轮播触发该事件，有以下3种：

//slideChangeTransitionStart回调函数，swiper从当前slide开始过渡到另一个slide时执行。 var mySwiper = new Swiper('.swiper',{ on: { slideChangeTransitionStart: function(){ alert(this.activeIndex); }, }, })

简而言之就是一个页面轮播到另一个页面开始时触发该函数。

//slideChangeTransitionEnd回调函数，swiper从当前slide开始过渡到另一个slide时执行。 var mySwiper = new Swiper('.swiper',{ on: { slideChangeTransitionEnd: function(){ alert(this.activeIndex);//切换结束时，告诉我现在是第几个slide }, }, })

简而言之就是一个页面轮播到另一个页面结束时触发该函数。

//slideChange事件函数。在当前Slide切换到另一个Slide时执行(activeIndex发生改变)，一般是在点击控制组件、释放滑动的时间点。 var mySwiper = new Swiper('.swiper',{ on:{ slideChange: function(){ alert('改变了，activeIndex为'+this.activeIndex); }, }, })

简而言之就是一个页面轮播到另一个页面中间触发该函数。

另外在页面改变时，activeIndex也随之改变，可以把activeIndex看成是slide页面的索引，通过activeIndex，可以实现控制slide页面。

【本文地址】

swiper中常用的事件方法

swiper中常用的事件方法

今日新闻

推荐新闻