在vue中使用swiper

一、使用npm下載vue-awesome-swiper 

npm install vue-awesome-swiper --save

二、在main.js中引用

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
import 'swiper/dist/css/swiper.css'（css須要單獨引用）

三、在組件中使用

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

html代碼：

<swiper :options="swiperOption">

<swiper-slide>1</swiper-slide>

<swiper-slide>1</swiper-slide>

<swiper-slide>1</swiper-slide>

</swiper>

javascript代碼：

export default {
  name: '',
  data () {
    return {
      swiperOption:{
        slidesPerView: 'auto',
        centeredSlides:true,
        spaceBetween: 10,
        loop:true,
        speed:600, //config參數同swiper4,與官網一致
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  }

}