swiper中常用的事件方法

通常我们写轮播图都会涉及到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页面。