Swiper.js使用遇到的问题总结

问题一：onSlideChangeEnd回调偶尔不触发

使用 fade 过渡方法，onSlideChangeEnd 回调偶尔触发，偶尔不触发。 因此使用 onTransitionEnd(过渡效果结束之后触发)；

var mySwiper = new Swiper('.swiper-container',{
  effect: 'fade',
  onTransitionEnd: function (swiper) {
    console.log("页面跳转到第:", swiper.activeIndex, " 页")
  }
}）

问题二：loop模式下，如何正确获取索引值

我们需要动态获取当前轮播图的索引值，常常我们会使用activeIndex属性来获取。比如像这样：

var swiper = new swiper('#swiper', {
  onTransitionEnd: function (swiper) {
    console.log("页面跳转到第:", swiper.activeIndex, " 页")
  }
});

然而，当轮播图需要设置循环时，我们就不能使用activeIndex属性了，而是要使用realIndex属性，例如：

var swiper = new swiper('#swiper', {
  loop: true, // 循环滚动
  onTransitionEnd: function (swiper) {
    console.log("页面跳转到第:", swiper.realIndex, " 页")
  }
});