--- theme: healer-readable highlight: a11y-dark --- **开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 10 天，[点击查看活动详情](https://juejin.cn/post/7194721470063312933 "https://juejin.cn/post/7194721470063312933")** Vue 或者 React 都可以使用 Swiper 来实现轮播图，并且可以满足大部分使用场景。在实现轮播图的过程踩了一些坑，并且由于 Vue2 和 Vue3 版本的差异，试了几种不同的写法，最终终于实现，轮播图的基础效果如下：

### Vue3 安装 ``` npm install swiper@6.5.6 --save ``` ### Swiper 的参数 - slidesPerView：每次显示几个轮播图 - spaceBetween：每个轮播图之间的间距（单位：px） - loop：是否循环滚动 - centeredSlides：是否居中对齐（true:居中，false：左对齐），默认 false 左对齐， - autoplay：是否自动播放 - navigation：是否左右切换箭头 - pagination：分页配置 - clickable：在点击分页圆点的时候，是否进行切换 - scrollbar：显示滚动条 - draggable：滚动条可拖动 - autoplay：切换图片的频率（毫秒为单位） - delay：切换的时间（单位：毫秒ms） - disableOnInteraction：滑动图片后不禁用自动播放 delay: 2500, disableOnInteraction: false, 其他参数配置可参考官方 API：[Swiper](https://swiperjs.com/swiper-api)

### 代码实现 ``` ``` 注： - 创建一个 modules 数组，目的是为了正常使用分页器和对应功能 - 如果是 setup 钩子函数的写法，注意最后要 return 分页相关的配置。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ececea07c49c4e358744eb1f7ad4bec6~tplv-k3u1fbpfcp-watermark.image?) ### Error: Can‘t resolve ‘swiper/css/swiper.css‘ 如何解决解决方案：在引入的文件中将其改为：import 'swiper/swiper-bundle.css' ### 其它方式除了 Swiper ，还有一种更简便的方法，就是使用 ElementUI 或 Antd 的轮播图组件（ Carousel 走马灯组件），可实现较为基础的需求。