web前端学习分享-如何在vue中引入swiper及自动播放功能不能实现的问题

虽然swiper官方网站中的使用文档中有关于vue如何引入swiper的描述，但是在初次接触的过程中还是碰到了一些问题，本文将这个过程做个分享记录，如果大家也碰到和我一样的问题，可作为参考。

一、安装swiper、vue-awesome-swiper

查看package.json文件安装的版本号

二、创建MySwiper.vue组件

第一步：在组件<script></script>中引入js文件

第二步：在组件<style></style>中引入css文件

此处注意需要结合自己下载的swiper的版本号按正确的路径和文件名引入css文件，不同版本有差异，不可照搬

第三步：在export default{}中配置参数

先注册组件Swiper和SwiperSlide

在data(){}中配置参数swiperOption

此处参数不做说明，官方文档中有详细描述，此处实现自动播放功能autoplay 、鼠标拖拽图片功能

第四步：在组件中的template中进行布局

src属性中可填入需要展示的图片

第五步：对需要展示的轮播图进行样式设置

这个可根据需要自定义，此处需要说明的是，如果对pagination小圆点在激活状态时的样式进行设置的话，可通过以下属性设置，如

自此便可以检验效果了，经检验，图片可以拖拽切换上一页下一页，但是pagination小圆点不显示，也不自动播放，导致这个问题的原因是swiper 6.X的版本的问题，在原来基础上面加上以下代码

此时问题便得到了解决，自动播放功能实现