轮播与滑块系统 是做什么的？
目的
轮播与滑块系统提供了一种设计水平滚动容器的方法，允许用户浏览一系列相关内容（卡片、图片、推荐语），而无需占用过多垂直空间。尽管轮播常因参与度低而受到批评，但通过系统化方法关注提示性、感知性能和用户控制，可以确保水平发现变得直观、可访问且具有高影响力。
用例
- 产品发现： 在电子商务中浏览“相关产品”或“新品上市”。
- 社交证明： 展示一系列客户推荐或案例研究。
- 媒体画廊： 在有限的视口内展示高密度的照片或视频集合。
- 引导/功能导览： 引导用户浏览一系列价值主张的线性序列。
- 仪表盘小部件： 在水平行中管理多个数据摘要，以保持页面节奏。
何时不应使用
- 关键顺序步骤： 如果用户必须看到每个项目才能完成任务，请使用垂直堆叠或网格，以确保没有遗漏。
- 内容量少： 如果只有 2 或 3 个项目，标准网格更高效且所需的交互更少。
- 内容类型混杂： 不要在单个轮播中混合不同的卡片类型（例如文章与产品并列）；一致性对于可扫描性至关重要。
- 低价值营销滑块： 避免将大型“英雄轮播”用于用户通常会忽略的无关联促销（横幅盲区）。
输入
- 内容原型： 滚动的是什么？（例如
card-ui-system卡片、图片或文本块）。 - 目录大小： 整个集合中有多少项目？
- 容器上下文： 是全宽部分还是包含在网格列内？
- 交互需求： 是否需要自动播放、无限循环或仅手动滚动？
- 品牌令牌： 用于控件和指示符的间距、排版和颜色系统。
输出
- 轮播解剖规范： 容器、轨道、导航（箭头）和分页（圆点）的视觉定义。
- 揭示策略： 定义“部分项目揭示”规则，以提示水平隐藏的内容。
- 响应式映射： 移动端、平板和桌面的每视图项目数规则。
- 可访问性蓝图： ARIA 标签、焦点管理和动画控制规范。
工作流程
1. 确定发现意图
确定用户应如何与项目交互：
- 线性： 用户逐个浏览项目（例如引导）。
- 探索性： 用户可以跳跃或略读（例如产品网格）。
- 环境式： 内容自动移动（例如标志跑马灯）。
2. 建立“揭示模式”
向用户提示右侧还有更多内容：
- 部分揭示： 确保“下一个”项目部分可见（通常溢出容器边缘 10-20%）。这是可滚动性的最强视觉提示。
- 淡入效果： 在容器边缘应用微妙的渐变淡入。
3. 选择导航提示
提供清晰的移动控件：
- 箭头（方向性）： 放置在轨道的垂直中心（容器内部或外部）。最适合高密度浏览。
- 分页（圆点/点）： 放置在轨道下方。最适合短序列（3-7 个项目）以显示进度。
- 滚动条： 底部的可视化进度条。非常适合非常大的集合。
4. 定义响应式列逻辑
映射一次可见的项目数：
- 桌面端： 每视图 3-5 个项目。
- 平板： 每视图 2-3 个项目。
- 移动端： 每视图 1.2 个项目（1 个完整项目 + 部分揭示）。
5. 实现控件和可访问性
- 键盘支持： 用户必须能够使用
ArrowLeft和ArrowRight在项目之间移动；Tab应移动到下一个可聚焦的控件，而不是每个幻灯片之间。 - 动画控制： 如果使用自动播放，提供可见的“暂停”按钮，并在悬停、聚焦以及
prefers-reduced-motion: reduce设置时（不要仅依赖悬停/聚焦）停止动画。 - ARIA 角色： 遵循 ARIA APG 轮播模式——容器使用
role="region"和aria-label，aria-roledescription="carousel"，幻灯片轨道使用aria-live="polite"（或在自动播放期间使用"off"），以便屏幕阅读器在不会不堪重负的情况下播报更改。 - 焦点可见性： 确保箭头、圆点和幻灯片内容上的焦点指示器不会被相邻幻灯片或粘性揭示边缘遮挡（WCAG 2.2 SC 2.4.11）。
决策规则
- “部分揭示”规则： 在移动端始终显示下一个项目的一小部分，以指示水平滚动而不依赖箭头。
- 箭头 vs. 圆点： 如果项目超过 5 个，使用箭头。仅当总数量较少（3-7）且显示进度有价值时，使用圆点。
- 循环逻辑： 仅对环境式发现（如标志）使用“无限循环”。对于功能性内容（如产品），使用“轨道末端”状态，其中右箭头变为禁用。
- 吸附滚动： 始终使用
scroll-snap-type: x mandatory确保项目在滑动或点击后完美对齐到容器边缘。
约束条件
- 可访问性： 必须支持
prefers-reduced-motion。所有交互式控件（箭头/圆点）必须满足 WCAG 2.2 SC 2.5.8（最小目标尺寸 24x24px，主箭头首选 44x44px）。 - 响应式： 项目必须是流动的。轮播容器绝不能让页面水平溢出；溢出必须包含在组件内。使用
clamp()设置项目宽度/间距，以便每视图项目数平滑缩放，而不是在固定断点处跳跃。 - 感知性能： 对尚未加载或屏幕外的项目使用
skeleton-state-system。
常见失败模式
- “隐形”轮播： 没有部分揭示也没有箭头，使组件看起来像一个静态的、破损的网格。
- “自动播放陷阱”： 内容旋转太快，用户无法阅读，或者没有提供停止的方法。
- 吸附损坏： 项目停在视口之间的一半位置，导致内容被切断。
- 交互状态缺失： 箭头没有悬停/聚焦状态，或者在轨道到达末端时不显示禁用状态。
- 移动端溢出： 轮播扩展了整个页面的宽度，导致用户在水平滚动时“迷失”。
验证标准
- 存在“部分揭示”或隐藏内容的清晰视觉指示。
- 导航控件（箭头/圆点）满足 WCAG 2.2 SC 2.5.8（最小触摸区域 24x24px）。
- 实现键盘导航（
Arrow键）和焦点管理，并且焦点指示器从不被遮挡（WCAG 2.2 SC 2.4.11）。 - 使用
scroll-snap确保项目对齐到网格。 - 自动播放（如果使用）可以由用户暂停，并在
prefers-reduced-motion下自动停止。 - 为所有主要断点定义了响应式项目计数。
- ARIA 标志和标签已正确应用于屏幕阅读器。