swiper动态改变滑动内容的实现方法
程序员文章站
2022-07-05 20:31:22
假设当前显示的是1,往左滑动一个递减1,往右滑动一个递增1
body下面添加如下代码
假设当前显示的是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动态改变滑动内容的实现方法,希望对大家有所帮助
下一篇: Vue框架之goods组件开发详解