flex轮播必须设display:flex、flex-wrap:nowrap、overflow:hidden，子项用flex:0 0 100%防压缩，并加touch-action:pan-x防冲突；无缝需首尾克隆图与百分比位移动画配合。
flex容器必须设为 nowrap 且 overflow: hidden
这是无缝轮播能“只露一张图”的前提。如果 flex-wrap 是 wrap，图片会在容器宽度不足时换行，整个轮播逻辑就崩了；而没加 overflow: hidden，用户会看到所有图片横向排开，根本不像轮播。
常见错误现象：.slider-list 宽度算错、忘记设 position: absolute（导致父容器被撑高）、或误用 display: inline-flex（破坏 flex 子项的尺寸计算）。
-
display: flex+flex-wrap: nowrap是硬性组合 - 容器高度需显式设定（如
height: 400px），不能依赖内容撑开 - 所有图片必须设
flex: 0 0 100%：禁止缩放、禁止增长、宽度占满容器 - 若用
transform: translateX动画，容器本身不能设transform，否则会干扰子项定位
@keyframes 中的位移值必须用百分比而非像素
用像素写死位移（比如 translateX(-800px)）会导致响应式失效——屏幕一变小，轮播就卡顿甚至跳帧。百分比位移（translateX(-100%)）才能让每张图精准滑出视口，且适配任意容器宽度。
关键点在于：动画的起止值要和图片数量对齐。3 张图就分 3 段，每段占 33.33%，但最后一帧必须回到 0% 才能循环——否则动画会停在最后一张。
- 动画总时长建议 ≥ 单张停留时间 × 图片数，避免“闪回”感
- 不要用
from/to，改用0%, 33.33%, 66.66%, 100%显式控制每张图的停留节点 - 动画函数推荐
linear：匀速更易做无缝衔接；cubic-bezier容易在边界处露出接缝
首尾克隆图是实现“视觉无缝”的唯一可靠方式
CSS 动画无法监听播放进度，也不能在某一帧执行 JS 跳转。所以纯 CSS 实现真正无缝，只能靠“障眼法”：把第一张图复制到末尾、最后一张复制到开头，让动画播到克隆体时，瞬间切回原图位置——人眼察觉不到这个跳跃。
容易踩的坑：ul 总宽度没同步更新（比如 5 张图本该是 width: 700%，加了首尾克隆后得改成 width: 900%）；或者克隆图没设 flex: 0 0 100%，导致宽度不一致，出现空白条。
- 克隆图仅用于视觉衔接，不参与指示器逻辑（指示器仍只对应原始图）
- 动画关键帧中，最后一段必须从
-100%回到0%，且不能有 easing 缓动 - 若用
scroll-snap-type替代动画，克隆图方案不适用——那是另一套滚动机制
移动端 touch 操作与 hover 暂停必须分开处理
纯 CSS 轮播里，:hover 只在桌面生效，但移动端没有 hover；而 touch 事件（如拖拽）CSS 无法响应，必须靠 JS。所以“悬停暂停”和“触摸中断”本质是两件事，不能混为一谈。
很多开发者试图用 @media (hover: hover) 统一控制，结果在 iPad 上失效——因为 iPad 同时支持 hover 和 touch，但 hover 状态不稳定。
- 桌面端可用
.carousel:hover { animation-play-state: paused } - 移动端需 JS 监听
touchstart并切换 class，再用 CSS 控制animation-play-state - 别给轮播容器加
pointer-events: none，否则按钮和指示器全失灵 - 若坚持零 JS，至少加
prefers-reduced-motion媒体查询降级为静态图
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
