swiper動態改變滑動內容的實現方法，swiper動態滑動內容

swiper動態改變滑動內容的實現方法，swiper動態滑動內容

假設當前顯示的是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動態改變滑動內容的實現方法，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！