纯CSS分页轮播核心是滚动吸附而非动画，通过scroll-snap-type: x mandatory与grid-auto-columns: 100%结合实现单图精准停靠，配合overflow-x: auto、scroll-behavior: smooth及移动端-webkit-overflow-scrolling: touch确保流畅体验。
用 grid-template-columns + scroll-snap-type 实现分页式轮播
纯 CSS 轮播的核心不是“动画”，而是“滚动吸附”——让每次滑动都精准停在一张图上。Grid 本身不负责滚动，但配合 scroll-snap-type: x mandatory 和 scroll-snap-align: start，就能强制容器在水平滚动时对齐每个子项。
关键点在于：容器必须启用横向滚动，且每个图片项需有明确的“吸附锚点”。常见错误是忘记设 overflow-x: auto 或漏掉 scroll-behavior: smooth，导致滚动生硬或无法吸附。
-
.carousel设为display: grid; grid-auto-flow: column; grid-auto-columns: 100%;（不用grid-template-columns，避免列数固定） - 每张图片设
scroll-snap-align: start;，并确保其宽度为容器宽的整数倍（width: 100vw或flex: 0 0 100%） - 移动端需加
-webkit-overflow-scrolling: touch防止 Safari 滚动卡顿
响应式列宽控制：用 minmax() 替代媒体查询
想让轮播在小屏单图、大屏双图甚至三图同显？别急着写一堆 @media。直接用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，Grid 会自动根据容器宽度分配列数，每列至少 300px，剩余空间均分。
注意：这个写法只适用于“多图并排显示”的画廊式轮播，不是传统单图切换轮播。若要保持单图切换逻辑，仍需搭配 scroll-snap，否则用户滑动时可能一次跳过多个项目。
立即学习“前端免费学习笔记（深入）”；
- 若需严格单图切换，
grid-auto-columns: 100%更可靠，minmax()容易在中等屏幕下产生 1.5 列导致错位 -
auto-fit会收缩空列，auto-fill会保留空轨道，轮播场景推荐auto-fit - 图片设
width: 100%; height: auto;，避免拉伸变形；object-fit: cover可选，但需父容器设固定高
无缝自动播放：靠 @keyframes + transform: translateX()
自动播放 ≠ JavaScript 定时器。用 CSS 动画驱动 transform: translateX() 滚动整个图片列表，再配合 animation-iteration-count: infinite 就能循环。但关键陷阱是：位移值必须基于内容总宽，而非容器宽。
假设 4 张图，每张占容器 100%，则总宽为 400%。动画终点设为 translateX(-300%)（移出前三张），才能让第四张刚好进入视口。用百分比比写死像素更安全，也适配缩放。
- 动画必须作用于图片容器（
.carousel-list），不是单张img - 避免用
left或margin-left，它们触发重排，transform走 GPU 加速 - 暂停交互：加
:hover { animation-play-state: paused; }，但 iOS Safari 对 hover 支持弱，建议额外加pointer-events: none防误触
无障碍与可访问性：别忽略 prefers-reduced-motion
自动播放对部分用户是干扰源。CSS 提供了 @media (prefers-reduced-motion: reduce) 媒体查询，可直接禁用动画：
@media (prefers-reduced-motion: reduce) {
.carousel-list {
animation: none;
}
}
这比 JS 检测更底层、更及时。同时，确保轮播容器有 role="region" 和 aria-label，导航按钮用 aria-controls 关联目标容器——这些虽不改变视觉，但决定屏幕阅读器能否正确播报。
最常被忽略的是：滚动容器默认没有焦点管理。用户用键盘 Tab 进入轮播后，按方向键无法切换图片——因为这不是原生 select 或 radio 控件。目前纯 CSS 无解，如需完整键盘支持，必须引入最少 JS 来接管 keydown 事件。
