轮播图在小屏卡顿或错位，主因是viewport缺失和容器宽度设置不当：必须添加，轮播容器用width:100%并设overflow:hidden，子项加flex-shrink:0防压缩。
轮播图在小屏幕卡顿或错位？检查 viewport 和容器宽度设置
响应式轮播图失效，八成不是 JavaScript 逻辑问题，而是基础布局没兜住。必须确保 <meta name="viewport" content="width=device-width, initial-scale=1"> 存在于 中——没有它，移动端会强制按 980px 渲染，所有媒体查询和 vw/% 宽度都会失准。
轮播容器（比如 <div class="carousel">）不能设固定 <code>width: 800px 这类值；应使用 width: 100% 或 max-width: 100%，并配合 overflow: hidden 防止子项撑破父容器。如果用 Flex/Grid 布局，记得给子项（如 .carousel-item）加 flex-shrink: 0，否则缩放时图片会被压缩变形。
用纯 CSS 实现自动轮播，但 Safari 不触发？改用 @keyframes + animation 替代 transition 循环
CSS-only 轮播依赖 transform: translateX() 移动，但仅靠 transition 无法自循环；必须用 @keyframes 配合 animation-iteration-count: infinite。Safari 对 animation 的 steps() 函数支持不稳定，别写 animation: slide 12s steps(3) 这种——改成线性动画 + JS 控制关键帧偏移更可靠。
实操建议：
- 每个
.carousel-item设为position: absolute，左定位用left: 0、left: 100%、left: 200%等，避免 transform 累积精度误差 - 动画时间统一设为
animation-duration: 4s，其中 3s 显示、1s 切换，用animation-timing-function: steps(1, end)强制跳变，不插值 - 为兼容旧版 iOS，加
-webkit-animation前缀，且避免在@keyframes中使用 calc() 或变量
touchstart/touchend 手势滑动失效？监听目标必须是轮播容器本身，且禁用默认行为
移动端滑动轮播，不能只监听 document 或 window，而要绑定到 .carousel 元素上。否则手指离开容器瞬间就丢失 touchend，导致位置计算中断。
关键点：
- 在
touchstart回调里立刻调用event.preventDefault()，否则 iOS 会触发页面滚动，干扰手势识别 - 记录
event.touches[0].clientX作为起始点，touchmove中实时计算偏移量，但不要直接更新transform——先存入变量，等touchend再判断是否滑过阈值（建议 30px）再执行跳转 - 必须清除
touchmove的默认行为：event.preventDefault()，否则部分安卓浏览器会“抢走”事件流
图片加载慢导致轮播空白闪烁？用 loading="lazy" + 占位 SVG + decode() 提前解码
轮播图首屏加载延迟，常见原因是图片未预加载，或浏览器解码阻塞渲染。单纯加 loading="lazy" 不够——它会让非视口内图片延后加载，但轮播的“下一张”很可能已脱离视口。
有效做法：
- 给所有
<img>加loading="eager"（尤其前 3 张），或用IntersectionObserver主动提前加载临近项 - 用极简 SVG 作占位：
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20 style="max-width:90%"%20 style="max-width:90%"%20viewBox='0%200%20100%20100'%3E%3Crect%20width='100'%20height='100'%20fill='%23eee'/%3E%3C/svg%3E" ...>，体积小于 1KB，无 HTTP 请求 - 图片加载完成后调用
img.decode().then(() => { /* 插入 DOM 或标记就绪 */ })，避免解码卡主线程；注意 Safari 15.4+ 才完全支持decode()
轮播最易被忽略的是图片尺寸与 DPR 匹配：用 srcset 提供 2x 图，但必须同步设置 width 和 height 属性（非 CSS），否则 layout shift 会导致轮播跳动。
