vue+swiper

安裝

npm i vue vue-loader css-loader --save
npm i @vue/cli
npm i  vue-awesome-swiper --save

引入vue-awesome-swiper animate.css animate.js

<template>
      <div id="app">
        <swiper :options="swiperOption" ref="mySwiper">
            <swiper-slide class="first-page swiper-no-swiping">
                <img class="ani" src="./assets/images/p1-1.png" width="100%" height="100%" swiper-animate-effect="fadeIn" swiper-animate-delay="5.2s" swiper-animate-duration="0.5s">
            </swiper-slide>
        </swiper>
    </template>
<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import * as animate from './assets/js/animate.js'
    
    
    export default {
      name: 'app',
        data(){
        swiperOption: {
          direction: 'vertical',
             effect: 'fade',
            mousewheel: true,
            noSwiping: true,
            width: window.innerWidth,
            height: window.innerHeight,
            on:{
              init:function(){
                animate.swiperAnimateCache(this);//隱藏動畫元素
                animate.swiperAnimate(this);//初始化完成開始動畫
              },
              slideChangeTransitionEnd: function(){
                animate.swiperAnimate(this);//每一個slide切換結束時也運行當前slide動畫
                var thisindex = this.activeIndex;
              },
    
            },
          },
        }
        components: {
        swiper,
        swiperSlide
      },
    }
</script>   
 <style scoped>
@import './assets/styles/animate.css';
</style>