假设当前显示的是1，往左滑动一个递减1，往右滑动一个递增1。下面通过实例代码给大家讲解swiper动态改变滑动内容的实现方法，感兴趣的朋友一起看看吧
假设当前显示的是1，往左滑动一个递减1，往右滑动一个递增1
body下面添加如下代码
<p class="swiper-container temp"> <p class="swiper-wrapper"> <p class="swiper-slide"> 1 </p> <p class="swiper-slide"> 2 </p> <p class="swiper-slide"> 3 </p> </p></p>
引用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; }, },})
初始值：
往左滑动三次：
往右滑动一次
做这个测试主要为了后面日历的左右滑动改变上一月下一月
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在vue中如何实现页面跳转后返回原页面初始位置
使用vue-router如何设置每个页面的title方法
如何解决vue.js显示数据的时,页面闪现
ajax请求+vue.js渲染+页面加载
在vue.js中如何使用ajax渲染页面
以上就是使用swiper如何改变滑动内容（详细教程）的详细内容。