スワイパーを使用してスライドコンテンツを変更する方法 (詳細なチュートリアル)

現在の表示が 1 であると仮定し、1 を左にスライドすると 1 減少し、右にスライドすると 1 増加します。以下は、スワイパーでスライド内容を動的に変更する実装方法を説明するコード例です。現在の表示を 1 として、左にスライドすると 1 ずつ減り、右にスライドすると、興味のある方は一緒に見てください。 1ずつ増やす

本文の下に以下のコードを追加

<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;
  },
 },
})

初期値:

左に3回スワイプ:

右に1回スワイプ

このテストを行う主な目的は、カレンダーを左右にスライドさせて前月と翌月を変更することです

上記は皆さんのためにまとめました。今後皆さんのお役に立てれば幸いです。

関連記事:

vueでページジャンプ後に元のページの初期位置に戻す方法

vue-routerを使用して各ページのタイトルメソッドを設定する方法

問題の解決方法データを表示する Vue.js のページが点滅するとき

ajax リクエスト + vue.js レンダリング + ページの読み込み

ajax を使用して vue.js でページをレンダリングする方法

以上がスワイパーを使用してスライドコンテンツを変更する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。