如何在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、能自动播放