全屏幻灯片核心是 overflow: hidden 裁剪 + transform: translateX() 位移，父容器需设 width: 100vw、overflow: hidden 且避免 transform/filter/opacity 破坏剪裁上下文，子项用 flex: 0 0 100% 横向排列，位移值为 calc(var(--i) * -100%)。
全屏幻灯片靠 overflow: hidden 和 transform: translateX() 配合实现
核心不是“切换动画”，而是让容器只显示一屏内容，其余部分被裁掉，再通过位移把下一张“推”进可视区。关键在父容器设 overflow: hidden，子项用 display: flex 横向排列，每张幻灯片宽度等于容器宽度（100vw 或 100%）。
- 别用
position: absolute+left做位移——它会触发重排，动画卡顿；transform只走合成层，更稳 - 父容器必须设明确宽度（比如
width: 100vw），否则100%子项可能算不准 - 移动端要注意：
100vw包含滚动条宽度，iOS Safari 下可能有 1px 偏移，稳妥起见用100%+ 父容器width: 100vw
用 scroll-snap-type 实现原生级滑动对齐（现代方案）
如果只需基础滑动+自动吸附，不用 JS 就能搞定。CSS 的 scroll-snap-type 是目前最轻量、兼容性足够（Chrome 69+/Firefox 68+/Safari 11.1+）的方案。
- 父容器加
scroll-snap-type: x mandatory，子项加scroll-snap-align: start - 必须配合
overflow-x: scroll和scroll-behavior: smooth才生效 - 禁用默认滚动条干扰：
scrollbar-width: none（Firefox）和::-webkit-scrollbar { display: none }（WebKit） - 注意：该方案无法响应按钮点击或键盘事件做主动跳转，得补 JS 控制
scrollTo()
transform: translateX() 的位移值怎么算才不偏移
位移量不是凭感觉写 -100%，得严格对应当前幻灯片索引和容器宽度。常见错误是直接写 translateX(-100%) 却没考虑子项是否已设 flex-shrink: 0，导致缩放后宽度失准。
- 每张幻灯片必须设
flex: 0 0 100%（即不缩放、不拉伸、宽占满） - 位移值 =
-index * 100%，例如第 2 张（index=1）就是translateX(-100%)，第 3 张是translateX(-200%) - 用 CSS 自定义属性传 index 更可控：
style="--i: 2;"→transform: translateX(calc(var(--i) * -100%)) - 别用
vw单位做位移（如translateX(-100vw)），窗口缩放时会错位；坚持用百分比
隐藏溢出必须写在父容器，且不能被 transform 或 filter 破坏剪裁上下文
overflow: hidden 失效是全屏幻灯片最常见的“白屏”或“多张同时显示”问题。根本原因是父容器触发了新的层叠上下文或格式化上下文，导致溢出裁剪失效。
立即学习“前端免费学习笔记（深入）”；
- 绝对不能给父容器加
transform（哪怕只是translateZ(0)）、filter、opacity ，这些都会创建新 stacking context，使 <code>overflow失效 - 检查父容器是否有
will-change: transform—— 它也会隐式创建层叠上下文 - 移动端 Safari 对
overflow: hidden在body或html上支持不稳定，务必套一层干净的<div class="slider"> 作为裁剪容器<li>调试技巧：临时加 <code>border: 1px solid red到父容器，确认裁剪边界是否贴合预期
事情说清了就结束。最常漏的是父容器的层叠上下文陷阱，改一个 opacity 就让整套位移失效，但控制台完全不报错。
