まず、vue-awesome-swiper を導入する必要があります。コードは次のとおりです。
'vue-awesome-swiper' から VueAwesomeSwiper をインポートします Vue.use(VueAwesomeSwiper)
main.jsにCSSインポート「../../static/swiper/swiper.min.css」を導入
このようにしてスワイパーを使用できます。使用コードは次のとおりです。
そこで使用される構成は次のとおりです。
タブを自分で定義するには、まずボタンをクリックした後に自動的にバナーページに移動する方法を知る必要があります。スワイパー方式とスワイパーのグローバル方式を使用します。
このようにして、this.swiper を直接呼び出して、seiper のネイティブ メソッドを呼び出すことができます。
指定されたページにジャンプします this.swiper.slideTo(1, 400, false) 3 つのパラメータ、1 つ目はジャンプ サブスクリプト、2 つ目はジャンプ時間、3 つ目はコールバック関数であり、false に設定されます。onSlideChange コールバック関数は実行されません。引き起こされる。
これにより、ボタンをクリックして特定のバナーにジャンプする効果が得られます。後は、特定のバナーにスライドしてボタンが自動的に点灯します。公式 Web サイトでは、slideChangeEnd を使用できますが、テストした後、この方法は簡単ではありませんを使用して、最終的にtransitionEndを使用しました。
注: Vue でメソッドを使用する場合は、on:{} を使用する必要があります。このメソッドは、上の図に例があります。原則として、Swiper 公式 Web サイトにあるすべてのメソッドが使用できますが、いずれかのメソッドが実際に使用できない場合は、使用されているメソッドが間違っているのではなく、特定のメソッドがサポートされていないだけです。