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

网友投稿 1093 2022-05-29

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

一、安装swiper、vue-awesome-swiper

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

二、创建MySwiper.vue组件

第一步:在组件中引入js文件

第二步:在组件中引入css文件

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

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

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

先注册组件Swiper和SwiperSlide

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

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

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

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

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

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

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

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

JavaScript Vue

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:uni-app整合uViewUI(非常牛逼的uni-app组件)
下一篇:PHP:ThinkPHP使用PHPMailer发送html邮件
相关文章