如何用swiper实现视频和图片无缝切换轮播效果？

一、为什么视频+图片轮播总是出问题？

在实际项目中，开发者经常会遇到以下痛点：

• 切换时出现空白或闪烁Swiper 循环模式下索引错位导致素材间出现间隙。话说回来，
• 视频播放冲突自动播放视频未暂停时Swiper 仍然执行 autoplay导致画面卡顿。
• 手动滑动后恢复自动播放不顺畅使用者滑动后autoplay 需要重新启动，否则会一直停在当前帧。
• 不同设备样式适配困难object-fit高度自适应等 CSS 设置不统一。
• 代码维护混乱图片和视频的地址硬编码在 HTML 中，后期更改成本高。

二、准备工作——引入必备资源

确保项目结构如下：

/css
└─ swiper.min.css
/js
└─ jquery.min.js // 1.12.4 版本
└─ swiper.jquery.min.js
└─ main.js // 这篇文章演示的业务代码
index.html

在 中引入 CSS。