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();
      };

  }