如何在vue项目中使用vue-awesome-swiper插件制作轮播图 之 版本2.6.7

1、安装插件

npm i  vue-awesome-swiper@2.6.7 --save

注：我这里安装的是，2.6.7低版本的，只适用于此版本
如果遇到问题，可从github上寻找答案。下面链接是针对此版本的使用介绍
https://github.com/surmon-china/vue-awesome-swiper/tree/v2.6.7
如果遇到其他问题，可以先到此路径下的issue中寻找答案。

2、创建一个组件。swiper.vue（名称任意）

<template>
  <div>
    <div class="wrapper">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(item,i) in picList" :key="i"><img :src="item.src"></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>
<script>
export default {
  name: "homeswiper", // 此处不能用Swiper作为name，否则报错
  data() {
    return {
      swiperOptions: {
        pagination: ".swiper-pagination", // 轮播图的点
        loop:true, // 循环
        autoplay:3000//3秒一循环，实现自动播放
      },
      picList:[
          {id:0,src:'https://gtms01.alicdn.com/tps/i1/T1Ww_JFEpdXXcZd9sr-640-200.png'},
          {id:1,src:'https://gw.alicdn.com/imgextra/i3/149/O1CN01wekXPw1CyHZ23AC4R_!!149-0-lubanu.jpg'}
      ]
    };
  }
};
</script>
<style  scoped>
  .swiper-slide img {
    width: 100%;
}
.wrapper  .swiper-pagination-bullet-active{
    background-color: #fff;    //将图片下方的小圆点颜色变为白色
}
</style>

3、将创建的组件导入需要使用轮播图页面里。（我这里引入的是home.vue页面）

import HomeSwiper from '@/components/common/swipe/Swipe.vue'

4、同时再home.vue中引入vue-awesome-swiper、Vue 和 插件的默认样式

import VueAwesomeSwiper from 'vue-awesome-swiper'
import '../../node_modules/swiper/dist/css/swiper.css'  //这里的路径需要根据自己的目录结构调整
import Vue from 'vue'
Vue.use(VueAwesomeSwiper)  //使用VueAwesomeSwiper

5、将导入的swiper组件放入home实例里面的component里。并再模板中使用

<template>
  <div>
    <router-view/>
 	<home-swiper/>
  </div>
  </template>
  ---------------------------
  
components: {
    HomeSwiper,
  },

6、成果演示

实现的功能
1、适用于移动端的轮播图，没有左右的按钮切换，属于手指滑动切换。
2、能够实现无缝循环，好像没有尽头的感觉
3、能自动播放