用 transform: translatex() 实现轮播可避免重排、启用 gpu 加速，需将图片包裹于 display: flex 的 .carousel-track 中，位移量按索引乘以单页宽度（如 -100%、-200%），配合 will-change、临时动画类、@container 响应式、aspect-ratio 和 passive touch 事件优化体验。
用 transform: translateX() 控制图片位移，别用 left 或 margin
直接改 left 或 margin 触发重排，动画卡顿明显，尤其在中低端手机上。用 transform: translateX() 走合成层，GPU 加速，滑动顺滑很多。
关键点是把所有图片包进一个 .carousel-track 容器里，再给这个容器加 transform。每张图宽度设为 100%，不设浮动或 inline-block，避免间隙问题。
- 必须给
.carousel-track设display: flex，否则translateX位移值难算准（尤其有空格换行时） - 位移量不是简单减去图片宽度：要乘以当前索引，比如第 2 张（索引 1），就是
translateX(-100%)；第 3 张（索引 2）是translateX(-200%) - 别忘了加
will-change: transform（只在动画触发时加，动画结束移除），防闪烁
用 @keyframes + animation 做轮播，但得手动控制播放时机
CSS 动画本身不支持“跳到某一帧”或“暂停后从某位置继续”，所以不能只靠一个无限循环的 @keyframes。得配合 JS 控制 animation-name 和 animation-play-state，或者每次切换时动态生成新动画。
更稳妥的做法是：每次切换，给 .carousel-track 加一个带具体位移和时长的临时动画类，比如 .slide-to-2，动画结束后立即移除——这样避免状态残留、叠加延迟。
立即学习“前端免费学习笔记（深入）”；
- 动画时长统一用
0.4s，太短像抽搐，太长用户等得慌 - 缓动函数选
cubic-bezier(0.25, 0.46, 0.45, 0.94)，比ease-out更自然，收尾不突兀 - 千万别用
animation-iteration-count: infinite配合animation-delay做自动轮播——延迟不准，切图时容易错帧
响应式断点要按容器宽度写，不是按屏幕宽度
轮播组件常嵌在不同宽度的栏目里，比如侧边栏窄、主内容区宽。用 max-width: 768px 这类媒体查询会失效——它查的是视口，不是轮播容器本身。
正确做法是：给外层容器加 container-type: inline-size，再用 @container 查询。兼容性够用（Chrome 105+、Safari 16.4+、Firefox 119+），老浏览器 fallback 到 JS 监听 resize。
- 小屏下每页显示 1 张图，中屏（≥480px）显示 2 张，大屏（≥768px）显示 3 张——这些数字基于容器宽度，不是设备像素
- 每页图数变了，
translateX的单位也要变：3 图一屏时，位移单位是-100%；2 图一屏时，单位变成-50%，否则会滑过头 - 用
aspect-ratio固定图片比例，避免缩放变形，比如aspect-ratio: 4/3
touchmove 手势位移要用 passive: true，否则 iOS 上卡死
移动端拖拽轮播时，如果监听了 touchstart/touchmove 却没设 { passive: true }，iOS Safari 会强制同步等待 JS 执行完才滚动，手感极差，甚至直接禁掉手势。
但设了 passive: true 后，就不能在 touchmove 里调 preventDefault() ——所以得换思路：用 transform 实时更新位移，而不是靠阻止默认行为来“接管”滚动。
- 记录起始
touchstart的clientX，在touchmove里算偏移量，实时设transform: translateX(calc(...)) - 松手（
touchend）后判断偏移是否超过阈值（比如 30px），再决定是回弹还是切到下一张 - 记得在
touchstart时清除所有正在运行的 CSS 动画，不然手势和自动轮播打架
transform 值、当前索引、动画类、定时器就会对不上。 
