有时候轮播图切换图片时,需要将其他部分也更改,但是不想写到轮播图里怎么办?
这里就需要动态获取轮播图切换时的索引值,来更改其他部分的内容。
代码如下:
var swiper = new Swiper(".mySwiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// loop:true,
autoplay: {
disableOnInteraction: false,
},
on: {
slideChangeTransitionStart: function(){
console.log(this.activeIndex);
},
},
});
this.activeIndex:就是当前页面的索引值,通过获取索引值,在该方法内实现需求。
注意:需要将loop设为false。而且初始化的时候是不会执行该方法的,只有切换才能执行。
若想要初始化也执行,则是这样的:
var mySwiper = new Swiper('.swiper',{
on: {
init: function(swiper){
//Swiper初始化了
alert('当前的slide序号是'+this.activeIndex);//或者swiper.activeIndex,swiper与this都可指代当前swiper实例
this.emit('transitionEnd');//在初始化时触发一次transitionEnd事件,需要先设置transitionEnd
},
},
})