vue 中 vue-awesome-swiper 輪播圖使用方式

    1.不用說上來下載依賴

npm install vue-awesome-swiper --save

2. 在main.js中配置

這裏我只說一下 import的

import Vue from 'vue'

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper) //全局引用一下

來一張圖：

      3. 在須要輪播圖的組件中引用

  import { swiper, swiperSlide } from 'vue-awesome-swiper'  （記得components註冊）

export default {
  components: {
    swiper,
    swiperSlide
  },
  name: 'carrousel',
  data () {
    return {
      swiperOption: {
        loop: true,
        autoplay: 1000,
        paginationClickable: true,
        preventClicks: false,
        noSwiping: true,
        autoplayDisableOnInteraction: false
      },
      swiperSlides: [1, 2, 3, 4, 5]
    }
  }
}

    

   4.html 代碼部分

<swiper :options="swiperOption">

    <swiper-slide v-for="slide in swiperSlides">I'm Slide {{ slide }}</swiper-slide>

    <div class="swiper-pagination" slot="pagination"></div>

  </swiper>

 

這是這幾天總結了一下，把以前的刪掉了！！但願能幫到大家！