在vue中使用Swiper实现自动轮播效果那些坑

首先是在安装vue-awesome-swiper包之后，引入 import 'swiper/css/swiper.css'文件后一直报错，我首先以为我要安装这个文件........就很无语，根据我查资料发现，根据不同的swiper版本不同，引入的CSS文件也不一样，然后我需要引入import "swiper/swiper-bundle.css" 文件就就不会再报错了。

 

没有这个错误之后我就准备开心的写轮播了，然后发现，轮播实现之后，就是不出现分页条，也不能实现自动轮播！！！！！！我太难了使用写个轮播图一堆错误，怀疑人生，查了很久，也没发现有人和我一样出现这个错误........然后我发现就是需要使用下面这几行代码，分页条就会出现，自动轮播的设置也会生效。因为我的那个版本中实例化之后没有autoplay这个属性和pagination分页属性，所以在实例化的时候，设置的那些属性根本不生效.......................

import Swiper2, { Navigation, Pagination, Autoplay } from "swiper"; 
Swiper2.use([Autoplay, Navigation, Pagination]);

设置之后实例中有：

在没有设置之前：

最后终于完成了这个最好用插件的轮播效果，我发现学习一个新的插件真的不可避免的需要踩坑。希望大家不会和我一样.......记录一下我的踩坑历史~~~

 

补充在官网下载的包，需要在package中找到你需要的文件

然后就可以简单实现一个轮播效果~~~

如果你使用npm命令你就可以在如下文件目录中查找你需要的js和css文件