使用swiper如何改變滑動內容（詳細教學）

假設目前顯示的是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如何改變滑動內容（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！