轮播图容器必须设 overflow: hidden，这是纯 CSS 轮播能“只显示一张图”的前提；漏掉则所有图片横向铺满页面，transform 再准也无效。
纯 HTML 无法实现轮播图的“动”——它只负责结构，真正控制切换、定时、状态同步的是 JavaScript，而视觉过渡和布局约束靠 CSS。没写对 transform 或漏掉 overflow: hidden，轮播就会错位或溢出；不节流 setInterval 或没清理定时器，切到其他 tab 后回来可能连播三张。
为什么轮播容器必须加 overflow: hidden
这是最常被忽略的基础约束。轮播项（比如 .slides 或 .carousel-track）通常用 display: flex 横向排布所有图片，总宽度远超容器。若不设 overflow: hidden，用户会看到所有图片并排挤在一行，甚至拖出横向滚动条。
- 仅靠
width和height不足以裁剪内容，必须显式声明overflow: hidden - 如果用了
position: absolute叠放图片，也要确保父容器是position: relative，否则absolute元素会相对于 body 定位，导致偏移 - 在移动端，部分安卓 WebView 对
overflow: hidden的解析有延迟，可加transform: translateZ(0)强制硬件加速来稳定裁剪
transform: translateX() 比 left 更可靠
用 left 改变位置会触发 layout，尤其在图片多或 DOM 深时，容易卡顿；transform 仅影响合成层，性能更好，且支持 CSS 过渡平滑动画。
- 推荐写法：
transition: transform 0.4s ease-in-out，配合transform: translateX(-500px)切换 - 避免混用：
left和transform同时设置会导致行为不可预测，浏览器可能忽略其中一个 - 无限循环时，若复制首尾图片做“假循环”，位移值要按单张宽度精确计算，例如每张宽
100%，则第 n 张对应translateX(-n * 100%)
指示器（dots）同步失败的三个常见原因
点击圆点跳转后图片没变、或自动播放时 dot 没亮，往往不是 JS 逻辑错，而是 DOM 绑定或状态更新时机不对。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 动态生成的
.indicator元素，如果在document.querySelector之后才插入 DOM，查询会返回null，需确保初始化顺序：先渲染 dots，再绑定事件 - 更新 active 状态时，别只改 class，还要清除上一个 active 元素——漏掉
previousIndicator.classList.remove('active')就会多个 dot 同时高亮 - 自动播放用
setInterval，但用户手动点击后没重置定时器，会导致“刚点完下一张，0.5 秒后又切”，应调用clearInterval再重启
图片变形与响应式断裂点在哪
轮播图在小屏上被压扁、留白过大或文字遮挡图片，核心问题常出在尺寸控制链路断裂。
- 不要只给
img设固定width/height，用object-fit: cover配合width: 100%; height: 100%保证填充且不拉伸 -
.carousel容器高度若写死为300px，在手机上会撑开页面，建议用aspect-ratio: 16 / 9或媒体查询分段设高 - 懒加载图片（
loading="lazy"）在轮播中可能失效——因为非首屏图片初始不在视口，IntersectionObserver需监听的是轮播容器的滚动/位移，而非单张图
轮播真正的复杂点不在“怎么动”，而在“什么时候不该动”：鼠标悬停是否暂停、触摸滑动是否接管、tab 切换后如何恢复计时、键盘 ArrowLeft/Right 是否支持、屏幕阅读器能否识别当前 slide 序号——这些细节不处理，轮播就只是个会动的装饰品。
