swiper動態(tài)改變滑動內(nèi)容的實現(xiàn)方法

發(fā)布時間：2020-09-06 09:27:11 來源：腳本之家閱讀：191 作者：zhyue93 欄目：web開發(fā)

假設當前顯示的是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切換時執(zhí)行(activeIndex發(fā)生改變)
   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動態(tài)改變滑動內(nèi)容的實現(xiàn)方法

往左滑動三次：

swiper動態(tài)改變滑動內(nèi)容的實現(xiàn)方法

往右滑動一次

swiper動態(tài)改變滑動內(nèi)容的實現(xiàn)方法

做這個測試主要為了后面日歷的左右滑動改變上一月下一月

總結

以上所述是小編給大家介紹的swiper動態(tài)改變滑動內(nèi)容的實現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！

向AI問一下細節(jié)

swiper動態(tài)改變滑動內(nèi)容的實現(xiàn)方法

猜你喜歡

最新資訊

相關推薦

相關標簽