現在の表示が 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スクリプトを追加左に3回スワイプ: 右に1回スワイプ このテストを行う主な目的は、カレンダーを左右にスライドさせて前月と翌月を変更することです 上記は皆さんのためにまとめました。今後皆さんのお役に立てれば幸いです。 関連記事: 以上がスワイパーを使用してスライドコンテンツを変更する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。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;
},
},
})