swiper4的callbacks回调函数

想要的效果：上面的title（文字）与下面的轮播图对应上，原本是想监听到swiper的触发事件，获取到当前的swiper-slide的下标 ，根据下标来判断显示对应的文字， 但是很难监听到事件，试用了各种事件。查了很多方法在我这都不奏效，最后在官方的API上发现了他们callbacks回调函数，轻而易举的监听到了事件的动向。

var swiper = new Swiper('.swiper-container', {
  on:{
    slideChangeTransitionEnd: function () {

        console.log(this.realIndex);

　　　　if (this.realIndex == 0){
        $('.country-name').text("加拿大")
      } else if (this.realIndex == 1){
        $('.country-name').text("澳大利亚")
      } 
    }
  },
});

场景需要，这里我用的事件是slideChangeTransitionEnd,官方有很多事件

这里我截取了一小部分，去官网看看，总有一款适合你。

 

转载于:https://www.cnblogs.com/ding0528/p/9228895.html