ホームページ > ウェブフロントエンド > jsチュートリアル > スワイパーを使用してスライドコンテンツを変更する方法 (詳細なチュートリアル)

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

亚连
リリース: 2018-06-11 16:08:09
オリジナル
2590 人が閲覧しました

現在の表示が 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(&#39;.swiper-container.temp&#39;, {
 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート