我要评论假设当前显示的是1，往左滑动一个递减1，往右滑动一个递增1
body下面添加如下代码
<div class="swiper-container temp"> <div class="swiper-wrapper"> <div class="swiper-slide"> 1 </div> <div class="swiper-slide"> 2 </div> <div class="swiper-slide"> 3 </div> </div> </div>
引用swiper的css和js脚本(当前使用的是4.x以上版本)
添加js脚本
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){
if(now_activeindex==4&&this.activeindex==1){
$(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;
},
},
})
初始值：
往左滑动三次：
往右滑动一次
做这个测试主要为了后面日历的左右滑动改变上一月下一月
总结
以上所述是小编给大家介绍的swiper动态改变滑动内容的实现方法，希望对大家有所帮助
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论