Vue輪播圖插件實現輪播,及Vue-awesome-swiper使用方法（官方文檔）

安裝設置
1.安裝Install vue-awesome-swiper
npm install vue-awesome-swiper --save
2.怎樣使用？

①全局導入
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'; //掛載VueAwesomeSwiper
/* 樣式的話，我這裏有用到分頁器，就在全局中引入了樣式 */
import 'swiper/dist/css/swiper.css' //引入css
Vue.use(VueAwesomeSwiper)
②組件引入
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
components: {
  swiper,
  swiperSlide
},
③在template中使用
    <div class="partnerSwiper">
      <swiper :options="swiperOption" ref="mySwiper">
        <!-- slides -->
        <swiper-slide v-for="(item,index) in list" :key="index"><img :src="item.img" /></swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div  class="swiper-button-next" slot="button-next"></div>
        <div class="swiper-scrollbar"   slot="scrollbar"></div>
      </swiper>
    </div>
④data中配置
  data() {
    return {
        list:[
        {img: require('../../static/images/ban01.jpg')},
        {img: require('../../static/images/ban02.jpg')},
        {img: require('../../static/images/ban03.jpg')}
        ],
      swiperOption: {
        // 若是須要分頁器
        pagination: {
          el:'.swiper-pagination',
          type: 'bullets',  
          clickable: true, //此參數設置爲true時，點擊分頁器的指示點分頁器會控制Swiper切換。
          hideOnClick: true, //默認分頁器會一直顯示。這個選項設置爲true時點擊Swiper會隱藏/顯示分頁器。
        },
        notNextTick: true,
        // 若是須要自動播放
        autoplay : {
          delay:3000,
          disableOnInteraction:false,  //用戶操做swiper以後，是否禁止autoplay。
          // reverseDirection: true,   //開啓反向自動輪播。
        },
        // 若是須要前進後退按鈕
        navigation: {
          nextEl: '.swiper-button-next', //前進按鈕的css選擇器或HTML元素。
          prevEl: '.swiper-button-prev', //後退按鈕的css選擇器或HTML元素。
          hideOnClick: true, //點擊slide時顯示/隱藏按鈕
        },
        // 若是須要滾動條
        scrollbar: {
          el: '.swiper-scrollbar',
          hide: true, //滾動條是否自動隱藏。默認：false，不會自動隱藏。
          draggable: true, //該參數設置爲true時容許拖動滾動條。
          snapOnRelease: true, //若是設置爲false，釋放滾動條時slide不會自動貼合。
          dragSize: 10, //設置滾動條指示的尺寸。默認'auto': 自動，或者設置num(px)。
        },
        effect:"coverflow",
        grabCursor : true,
        setWrapperSize :true,
        mousewheelControl : true,
        observeParents:true,
      }
    }
  },
  // you can find current swiper instance object like this, while the notNextTick property value must be true
  // 若是你須要獲得當前的swiper對象來作一些事情，你能夠像下面這樣定義一個方法屬性來獲取當前的swiper對象，同時notNextTick必須爲true
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  mounted() {
    // you can use current swiper instance object to do something(swiper methods)
    // 而後你就能夠使用當前上下文內的swiper對象去作你想作的事了
    // console.log('this is current swiper instance object', this.swiper)
    // this.swiper.slideTo(0, 1000, false)
    //鼠標覆蓋中止自動切換
      this.swiper.el.onmouseover = function () {
        this.swiper.autoplay.stop();
      };
      //鼠標離開開始自動切換
      this.swiper.el.onmouseout = function () {
        this.swiper.autoplay.start();
      };

  }