幻灯片切换后如何获取当前索引？Swiper realIndex值异常问题

嘿，这个坑我之前踩过！你遇到的问题确实是因为slideChange事件的触发时机不对——它是在幻灯片切换动作开始时就触发了，这时候Swiper内部的索引还没来得及更新，所以拿到的realIndex总是上一张的。

要获取切换完成后的当前幻灯片索引，你需要用slideChangeTransitionEnd事件，这个事件会在幻灯片过渡动画完全结束后触发，此时realIndex已经正确更新为当前活跃幻灯片的索引了。

修改后的代码如下：

mySwiper = new Swiper('.my-swiper', { 
  direction: 'vertical', 
  loop: true, 
}); 

mySwiper.on('slideChangeTransitionEnd', function () { 
  console.log('*** mySwiper.realIndex', mySwiper.realIndex); 
}); 

另外补充一下：如果你的Swiper设置了speed: 0（没有过渡动画），那slideChangeEnd事件会更合适，它在切换动作完成后立即触发，不管有没有过渡动画。不过大多数带过渡的场景，slideChangeTransitionEnd是最优选择。

内容的提问来源于stack exchange，提问作者Bafsky