最省事的响应式轮播方案是Swiper，但需确保DOM加载完成后再初始化、动态内容要调用update()、translateX应基于视口单位计算、Flex子项设flex:0 0 100%、自动播放需监听mouseenter/focusin/visibilitychange、resize时手写轮播须重定位。
直接用 Swiper 是最省事的响应式轮播方案，但前提是你要接受它的 DOM 结构约束和默认行为；纯手写轮播也能做响应式，但容易在视口变化时错位、卡顿或索引失步——关键不在“能不能动”，而在“动得准不准、停得稳不稳”。
Swiper 初始化必须等 DOM 加载完再执行
很多人把 new Swiper('.swiper', {...}) 写在 <script> 标签里，却没包裹在 DOMContentLoaded 事件中，结果页面还没解析完就去查 .swiper 元素，返回 null，控制台报错 Cannot read properties of null，轮播根本起不来。
- 必须用
document.addEventListener('DOMContentLoaded', () => { new Swiper(...) })包一层 - 如果轮播容器是动态插入的（比如 AJAX 加载后追加），得手动调用
swiper.update() - 不要在
head里直接初始化，哪怕用了defer属性也不保险
纯 CSS + JS 轮播的 translateX 单位必须用视口单位
用 transform: translateX(-300px) 这类固定像素值，在手机横屏/竖屏切换时会立刻错位。真正适配多端的做法是让每次滑动距离等于当前容器宽度，而容器宽度应基于 100vw 动态计算。
- 推荐用
translateX(calc(-1 * var(--slide-width)))，其中--slide-width设为100vw或通过 JS 注入实时值 - 若用 JS 控制偏移，别写死
offset = index * 300，改用offset = index * container.offsetWidth - Flex 容器里所有
.slide必须设flex: 0 0 100%，否则缩放时子项宽度会塌缩
自动播放暂停逻辑必须监听 mouseenter / focusin
只靠 autoplay: { delay: 3000 } 或手写的 setInterval 不够，用户鼠标悬停、键盘聚焦到轮播区、甚至切到其他标签页时，都该暂停。否则容易造成误操作或资源浪费。
立即学习“前端免费学习笔记（深入）”；
- Swiper 用户需显式开启
pauseOnMouseEnter: true和delay: 3000 - 手写轮播必须监听
container.addEventListener('mouseenter', pause)和container.addEventListener('mouseleave', resume) - 还要加
document.addEventListener('visibilitychange', () => { if (document.hidden) pause(); else resume(); })
最常被忽略的是 resize 后的重定位：窗口大小变化时，Swiper 会自动处理，但手写轮播几乎没人补 window.addEventListener('resize', updateSlideWidth) ——这导致横屏切回竖屏后，图片一半露在外面，或者导航点全部堆在左上角。
