Vue2.0中使用swiper插件 vue-awesome-swiper 指南

网站需要做简单轮播效果，实现之后来总结一下。
注意swiper版本号，6.0以上的请移步https://blog.csdn.net/G_X73/article/details/112961121

先附上参考的官方文档链接：
https://www.npmjs.com/package/vue-awesome-swiper#custom-swiper-plugin

1. npm安装

npm install swiper vue-awesome-swiper --save

2. 在vue项目中的main.js中添加：

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
//若swiper版本高于6.0.0，需import 'swiper/swiper-bundle.css'方式引入样式；

Vue.use(VueAwesomeSwiper)

3. 运用到组件中

<template>
  <div class="homepage">
    <div class="carousel">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide>
          <img src="../../statics/banner.png" alt="" class="banner">
        </swiper-slide>
        <swiper-slide>
          <img src="../../statics/banner.png" alt="" class="banner">
        </swiper-slide>
        <swiper-slide>
          <img src="../../statics/banner.png" alt="" class="banner">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
        <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
import {swiper, swiperSlide} from 'vue-awesome-swiper'
export default {
  name: 'homepage',
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        notNextTick: true，
        loop: true,
        // 初始索引
        initalSlide: 0,
        // 自动播放
        autoplay: true,
        // 切换效果
        effect: 'effect',
        speed: 800,
        direction: 'horizontal',
        // 左右点击
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        // 分页器
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        swiperSlides: [1, 2, 3]
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  methods: {
  
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
</style>

需要注意的问题：

1. 分页器点击小圆点跳转到对应页面不能与设置抓手grabCursor : true同时设置
2. vue-awesome-swiper基于组件的开发设置分页器和上一页下一页按钮，采取下列方式定义：

 	// 左右点击
          navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
          },
 	// 分页器设置         
          pagination: {
              el: '.swiper-pagination',
              clickable :true
          }

3. 自动轮播autoplay:true与swiper中方法slideTo(0, 0, false)不能同时设置，自动轮播会失效

具体的swiper设置属性可以参考中文API文档： https://www.swiper.com.cn/api