overflow: hidden 必须加在直接包裹滑动内容（如 .slides）的父容器上，否则因子元素脱离文档流或父容器无高度/未设 position: relative，裁剪失效，导致仍出现滚动条。
直接加 overflow: hidden 就能解决，但必须加在「真正包裹所有图片的直接父容器」上，不是随便哪个外层 div 都行。
为什么加了 overflow: hidden 还有滚动条？
常见错误是把 overflow: hidden 写在了最外层 wrapper（比如 .carousel）上，而实际滑动的是内部的 .slides —— 如果这个 .slides 没被它的直接父级限制溢出，浏览器就会按默认 overflow: visible 渲染，超出部分照常显示，甚至触发横向滚动条。
-
.carousel是布局容器，设宽高 +position: relative即可，不用管溢出 -
.slides是 flex 容器，横向排图，它必须被它的**直接父级**用overflow: hidden包住 - 这个“直接父级”通常就是
.carousel的子元素，比如<div class="carousel"><div class="slides">...</div></div>，那么overflow: hidden应该写在.carousel上
overflow-x: auto 和 overflow: hidden 的区别要分清
如果你看到横向滚动条，大概率是因为误用了 overflow-x: auto 或 overflow: auto。这两个值允许用户手动拖拽滚动，不是裁剪——轮播图不需要用户自己拉条子，而是靠 JS 或 CSS 控制位移。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
overflow: hidden：强制裁剪，超出部分不可见、不可交互，轮播必需 -
overflow-x: auto：只在内容超宽时显示滚动条，适合文档阅读场景，不适合轮播 - 移动端 Safari 对
overflow: scroll支持不稳定，auto有时也不触发 snap，所以别混用
flex + translate 轮播里 overflow: hidden 必须配 position
仅加 overflow: hidden 不够，如果 .slides 是 position: absolute，它会脱离文档流，父容器可能高度塌陷，导致裁剪失效——哪怕 overflow 设了，也因父容器“没高度”而白搭。
- 确保父容器（即加
overflow: hidden的那个）有明确高度，比如height: 400px或aspect-ratio: 16/9 - 如果
.slides是position: absolute，父容器必须设position: relative - 更推荐用
display: flex+overflow: hidden组合，不依赖定位，兼容性更好，也不容易塌高
最容易被忽略的一点：overflow 裁剪只对「块级盒模型边界」生效，不关心 transform 位移。也就是说，哪怕你用 transform: translateX(-1000px) 把图片拉到左边很远，只要父容器设了 overflow: hidden 且自身尺寸固定，它就真的只显示视口内的部分——这点和 margin-left 或 left 动画完全不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
