VueのNuxt.jsはSwiperアニメーションを使用しました
ADOは、ポイントへのストレートをしましょう。
- 最初にインストールVUEで使用Swiper
npm i vue-awesome-swiper --save。 - インストールが完了したら、プラグインは新しいswiper.jsファイルフォルダを作成します。JSファイル次のように
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
Vue.use(VueAwesomeSwiper)
、または[参照githubのポータル→ ] - レディは、必要に応じてswiper.animate1.0.3.min.jsファイルとanimate.min.cssのファイルを。→[ ポータル ]
- swiper.animate1.0.3.min.js、animate.min.cssの中のファイルの静的のフォルダ、または資産フォルダをすることができ、私は個人的にあなたが置かれているファイルに応じて、静的なフォルダを置きますnuxt.config.js設定CSS、続くプラグインの新しいフォルダanimate.jsファイルを。PS :(個人的に考えてanimate.jsが依存swiper.js、そのためのプラグインを使用せずに終わったヘッド内のスクリプトタグの形、それは）問題の順序に依存しています。身近に、ファイルで使用されるanimate.js
import '../static/js/swiper.animate1.0.3.min'モードでは、アニメーションを導入しているnuxt.config.jsプラグインでanimate.jsが配置されたプラグswiperプラグの後ろに。例えば：
- すべての準備が終わりに構成され、以来、以下を参照してくださいnuxt使用swiperの使用に必要
v-swiper:mySwiper="swiperOption"な方法。EG：
- 必要とアニメーションがプログラムまたは公式サイト提供を参照して、以下のように必要とされています[→ ポータル ]
- 遂に
- ここでは、以上の、異なるアニメーション効果を提供するクラス名の公式ウェブサイトに応じて選択することができます。[→ 効果ポータル ]
