So ändern Sie den Schiebeinhalt mit dem Swiper (ausführliche Anleitung)

Gehen Sie davon aus, dass die aktuelle Anzeige 1 ist. Schieben Sie eins nach links, um es um 1 zu verringern, und nach rechts, um es um 1 zu erhöhen. Im Folgenden finden Sie einen Beispielcode, der Ihnen die Implementierungsmethode zum dynamischen Ändern des Schiebeinhalts durch Swiper erläutert. Interessierte Freunde sollten einen Blick darauf werfen

Angenommen, die aktuelle Anzeige ist 1, schieben Sie einen nach links, um ihn zu verringern um 1, und schieben Sie nach rechts, um um 1 zu erhöhen

Fügen Sie den folgenden Code unter dem Text hinzu

<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>

Referenzieren Sie die CSS- und JS-Skripte von Swiper (verwendet derzeit Version 4.x oder höher)

JS-Skript hinzufügen

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

Anfangswert:

Dreimal nach links wischen:

Wischen Sie einmal nach rechts

Der Hauptzweck dieses Tests besteht darin, den Kalender nach links und rechts zu schieben, um den vorherigen Monat und den Monat zu ändern Nächsten Monat

Das Obige habe ich für alle zusammengestellt. Ich hoffe, es wird in Zukunft nützlich sein.

Verwandte Artikel:

So kehren Sie nach einem Seitensprung in Vue zur Ausgangsposition der Originalseite zurück

So richten Sie es ein Verwenden von vue-router Die Titelmethode jeder Seite

So lösen Sie das Problem, wenn Vue.js Daten anzeigt und die Seite blinkt

Ajax Anfrage+vue.js-Rendering+ Laden der Seite

So verwenden Sie Ajax, um die Seite in vue.js zu rendern

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Schiebeinhalt mit dem Swiper (ausführliche Anleitung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!