vue項目中使用Swiper

安裝

npm install vue-awesome-swiper -save 或者  yarn add vue-awesome-swiper

使用

全局注冊沒問題

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper)

局部頁面注冊會報錯,原因暫時未知。

 

 

頁面調用

 <swiper ref="mySwiper" :options="swiperOptions" class="my-swiper">

      <swiper-slide> <img src="index.png" /> </swiper-slide>

</swiper>    

  export default {

    name: "screen",

    components: {},

    data () {

      return {

          swiperOptions:{

            // 輪播圖的方向，也可以是vertical方向horizontal

            direction:'vertical',

            //播放速度

            loop: true,

             //自動播放

            autoplay: {

                delay: 3000,

                stopOnLastSlide: false,

                disableOnInteraction: true,

            },

            // 播放的速度

            speed:2000,

          },

      }

    },

    computed: {},

    mounted(){},

    methods: {}

  }