swiper切换的是从第五个开始_swiper5切换页面数据动态加载

如果本文帮助到你，本人不胜荣幸，如果浪费了你的时间，本人深感抱歉。

如果有什么错误，请一定指出，以免误导大家、也误导我。

swiper官方网址：点击查看

线上demo：点击查看

核心方法，在当前Slide切换到另一个Slide时执行：

var mySwiper = new Swiper(‘.swiper-container‘,{

on:{

slideChange:function(){

alert(‘改变了，activeIndex为‘+this.activeIndex);

},

},

})

完整代码：

Document

1

2

3

var now_ActiveIndex = 2; //,//当前所在下标

var tempSwiper = new Swiper(‘.swiper-container.temp‘, {

initialSlide:1,

loop:true,

speed:400,

on: {

slideChange:function (swiper) { //当前Slide切换时执行(activeIndex发生改变)

var pre_number = Number($(this.slides[now_ActiveIndex]).text()); //获取当前页数字

if (now_ActiveIndex > this.activeIndex) { //如果当前数字大于索引,索引区间范围1~4

if (now_ActiveIndex == 4 && this.activeIndex == 1) { //swiper回到第一页

$(this.slides[this.activeIndex]).text(pre_number);

}else { //上一个

var act_number = pre_number - 1;

$(this.slides[this.activeIndex]).text(act_number);

}

}else if (now_ActiveIndex < this.activeIndex) {if (now_ActiveIndex == 0 && this.activeIndex == 3) {

$(this.slides[this.activeIndex]).text(pre_number);

}else { //下一个

var act_number = pre_number + 1;

$(this.slides[this.activeIndex]).text(act_number);

}

}

now_ActiveIndex= this.activeIndex;

},

},

})

width:100%;

height: 200px;

background: #ccc;

}

.swiper-slide{

display: block;

width:100%;

height:100%;

text-align: center;

line-height:200px;

font-size: 30px;

}

如要模拟异步请求，可使用mySwiper.allowSlideNext，mySwiper.allowSlidePrev，mySwiper.allowTouchMove配合使用。