欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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动态改变滑动内容的实现方法

往左滑动三次:

swiper动态改变滑动内容的实现方法

往右滑动一次

swiper动态改变滑动内容的实现方法

做这个测试主要为了后面日历的左右滑动改变上一月下一月

总结

以上所述是小编给大家介绍的swiper动态改变滑动内容的实现方法,希望对大家有所帮助