Swiper.js 是最快最稳的响应式轮播方案，必须严格遵循 swiper-container→swiper-wrapper→swiper-slide 三层结构，正确配置 autoplay、pauseOnMouseEnter 和 disableOnInteraction，并注意移动端 CSS 合成层优化。
直接用 Swiper.js 是最快、最稳的响应式轮播方案，比手写 JS + CSS 切换 display 或 opacity 省心得多，尤其在移动端拖拽、懒加载、循环无缝、分页器同步这些需求上，原生实现容易翻车。
Swiper 初始化必须满足的三重 HTML 结构
Swiper 不接受任意结构，swiper-container → swiper-wrapper → swiper-slide 这三层嵌套缺一不可，否则 JS 加载后不生效或报错 Cannot read property 'length' of undefined。
-
swiper-container必须设宽高（哪怕用100%），且不能是display: inline元素 -
swiper-wrapper不能手动加display: flex或overflow，Swiper 会自己接管 - 每张图用独立
<img>包在<div class="swiper-slide">里，别塞进<ul>或<figure>—— 否则swiper-slide选择器找不到子元素
自动轮播 + 悬停暂停的正确写法
很多人只写 autoplay: { delay: 3000 }，结果鼠标悬停不停，用户点按钮后定时器还跑着，导致图片“跳帧”或“连切两张”。关键是要启用 disableOnInteraction: false 并配合 pauseOnMouseEnter: true。
-
pauseOnMouseEnter: true是必须项，它让 Swiper 在mouseenter时自动调swiper.autoplay.stop() -
disableOnInteraction: false防止用户点左右箭头或指示点后，autoplay 被 Swiper 默认禁用（默认值是true） - 如果需手动控制启停，调用
swiper.autoplay.start()/swiper.autoplay.stop()，不要自己搞clearInterval
移动端滑动卡顿？检查这三项 CSS
Swiper 在 iOS Safari 或 Android Chrome 上滑动粘滞、掉帧，大概率不是 JS 问题，而是 CSS 触发了非合成层渲染。
立即学习“前端免费学习笔记（深入）”；
- 确保
.swiper-container有touch-action: pan-y pinch-zoom（Swiper v11+ 默认加，但老项目可能漏） - 禁止给
.swiper-slide设transform: translateZ(0)或will-change: transform—— Swiper 自己已用translate3d，重复加反而干扰 GPU 合成 - 图片必须带
loading="lazy"，但轮播首图建议删掉该属性，避免首屏白屏；其余图保留，由 Swiper 的lazy: true配合更稳妥
真正难的不是让轮播“动起来”，而是让它在各种屏幕尺寸、各种交互路径（点击/悬停/拖拽/键盘焦点）下状态一致。Swiper 把这些边界 case 都压过了，别为了“不用库”硬写一套，尤其当项目要上线时。
