在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件

前言

轮播图是项目中常用的功能，用于播放图片和视频。有时会遇到轮播图按钮点击无反应的问题，这可能是由于安装的轮播图组件版本不兼容造成的。推荐使用5.4.5版本，因为其兼容性和稳定性较好。本文将介绍两种使用轮播图的方法：普通使用和将轮播图封装为组件以便复用。

效果演示

• 点击左右箭头切换轮播。
• 点击轮播图下方圆圈切换。
• 设置自动轮播和轮播时长。

一、项目中安装使用

1. 通过npm命令安装指定版本的Swiper。
2. 在使用轮播图的页面或全局引入Swiper。
3. 设置轮播图的尺寸和样式，并使用双向数据绑定加载图片。
4. 初始化轮播图实例，并配置自动轮播、循环模式、分页器和导航按钮。

二、自己遇到的问题

之前使用的3.4.2版本的Swiper导致轮播图的切换按钮无效。若要卸载已安装的包，可以使用npm的uninstall命令。

三、如何将Swiper抽离成一个组件？

为了避免页面臃肿，可以将Swiper轮播图抽离出来，创建一个公共组件。这样，其他页面可以直接引入该组件。组件中的图片可以通过传参动态替换。