项目中引入了vant组件库，直接使用van-swipe即可。
GitHub：https://github.com/Ewall1106/mall

基本介绍

• vue-awesome-swiper是一个轮播图开源组件，官网从安装到使用都介绍的很详细了，大家可以去看看。
• 我们从官网选取一种轮播图效果作为我们项目的轮播图，就这个了：

swiper

安装

• 用npm命令行中输入安装vue-awesome-swiper依赖：

$ npm install vue-awesome-swiper --save

npm

• 然后我们去package.json中看看是否存在

package.jcon

使用

• 官网上提供了多种使用方式，我们要在vue项目中要用到的主要是选全部引入还是组件中引入，这里我们选第二种：

• 我们按照它的来在项目中引入：

carousel.vue中引入

• html的结构也按照它提供的来复制粘贴一下到carousel.vue中：

github

• 我们的template结构把右箭头、左箭头什么的注释掉

carousel的html结构

• 添加分页参数和自动轮播两个参数，具体参数注释上也上说的很清楚了，跟swiper官方api参数一样。

js

• 然后我们去网上找几张图，写个img：

  
  
  添加img

• 给img设置一下宽度，最后显示的效果就是这样：

效果

深度处理器

• 我们看到这里的焦点会有一个默认的颜色，改变这个焦点颜色也有一个小坑。

问题所在

• 如何解决？这里我们要用到vue的深度作用选择器。
  

  vue官网

• 用开发者工具找到这个点的class类名：

tools

• 使用深度选择器把这个点变为白色。（less里面不能用 >>> 这种写法）

深度选择器

• 最后的浏览器的效果就是这样了：

最终轮播图效果