Vue2.x 中使用vue-awesome-swiper实现自定义轮播图效果(+vue-property-decorator+typescript)

官方资源：

1. swiper：开源免费强大的滑动触摸插件：这里我们用来参考swiper的参数设置，后面会看到。
2. 在Vue中使用swiper: 只适用于Vue3.x，所以这里我们不参考这个
3. vue-awesome-swiper：为vue服务的swiper组件，我们从这里开始！！

项目vue版本：^2.6.11

目标效果

效果参考网址：https://www.zyfra.com/

1.安装依赖

注意这里是同时安装了swiper和veu-awesome-swiper的最新版本：

npm install swiper vue-awesome-swiper --save

如果你需要安装指定版本的需要加上你指定的版本号(如何安装指定版本)

2.全局注册

在项目的main.js或是main.ts文件中注入：

import VueAwesomeSwiper from 'vue-awesome-swiper'

//导入css样式文件(我这里用的是swiper 4.x)
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

这里需要注意的是不同版本的swiper，css文件的位置不同，要根据自己的情况稍作修改，这里有两个官方举例：

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<