轮播图容器必须设 overflow: hidden，否则水平滚动失效；需配 position: relative、显式高度；轨道用 flex 布局并设 flex-shrink: 0；位移仅用 transform: translatex()；无限滚动须双份内容且位移终点为原始总宽。
轮播图容器必须设 overflow: hidden
所有水平滚动轮播图失效的第一原因，就是外层容器没加 overflow: hidden。它不是可选样式，而是强制裁剪轨道的“闸门”。没有它，图片会直接撑出页面、滚动条乱跳、transform 位移后留白露底色。
常见错误是只写 overflow-x: auto 或干脆不写——前者让用户能手动拖动但破坏自动轮播逻辑，后者等于完全放弃控制。
- 容器需同时设
position: relative（为内部绝对定位元素提供参考） - 如果用
flex布局轨道，容器高度必须显式定义（如height: 400px），否则 flex 项可能塌陷 - 移动端 Safari 对
overflow: hidden+transform组合偶尔有渲染延迟，加will-change: transform可缓解（仅在必要时）
carousel-track 要用 display: flex 而非 white-space: nowrap
用 flex 是目前最可控的横向排列方式。它天然忽略换行符空白、不依赖字体大小、支持 flex-shrink: 0 防缩放挤压，而 white-space: nowrap + inline-block 图片极易因 HTML 换行产生 4px 间隙，且在缩放或不同字体设置下行为不稳定。
关键点：
- 每张图必须设固定宽（如
width: 100%或具体像素值），并加flex-shrink: 0 - 轨道总宽度无需手动计算（比如
width: 500%），靠 flex 自动撑开更可靠 - 避免对
img直接设vertical-align——flex 下无效，且易引入意外基线偏移
位移用 transform: translateX()，别碰 left 或 margin-left
left 触发 layout（重排），margin-left 在小数像素下抖动明显，只有 transform: translateX() 是 GPU 加速、无卡顿、支持 sub-pixel 渲染的正解。
实操细节：
- 过渡动画必须写在轨道元素上：
.carousel-track { transition: transform 0.35s cubic-bezier(0.33, 0.66, 0.5, 1); } - 不要用 JS 动态改
style.transition，Safari 可能不响应；CSS 里写死更稳 - 位移值必须是整数像素（如
translateX(-800px)），避免用百分比或 rem——它们在缩放或高 DPI 屏幕下易错位 - 最后一张图回滚到首张时，务必用
transform: translateX(0)瞬切，不能靠动画“滑回去”，否则视觉跳变明显
多图无缝滚动必须复制一份内容，且位移终点严格等于原始总宽
双份内容（A-B-A-B）是纯 CSS 实现无限滚动唯一稳定方案。单靠 animation 循环位移无法解决最后一帧到第一帧的衔接问题。
最容易被忽略的三个计算点：
- 原始总宽 = 所有图片
offsetWidth之和（JS 获取）或 CSS 中显式 sum（如 5 × 200px = 1000px） - 复制后轨道宽度是原始总宽的 2 倍，但动画终点只需位移
-原始总宽，不是 -2 倍 - 若图片带
gap、margin或border，必须计入总宽；用getBoundingClientRect().width比单纯加 width 更准
真正难的不是写出来，而是每次换图、改尺寸、加 margin 后重新校准这个位移值——它差 1px，滚动就卡顿或闪一下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
