特性
- 自动轮播，支持悬停/触摸/聚焦暂停
- 吸附滚动 + 平滑滚动带来顺滑翻页体验
- 左右箭头切换并适配明暗主题
实现核心
伪元素 / 伪类
-
::-webkit-scrollbar ：隐藏 WebKit 浏览器滚动条。 -
::scroll-marker-group ：生成并布局分页指示器容器。 -
::scroll-marker ：定义每个 slide 的 marker 样式。 -
:target-current ：高亮当前 slide 对应的 marker。 -
@container scroll-state(snapped: x) ：当前吸附页提亮并放大。
关键 CSS 属性
-
overflow-x: auto + display: flex ：实现横向滚动轨道。 -
scroll-snap-type: x mandatory ：开启强制分页吸附。 -
scroll-snap-align: center + scroll-snap-stop: always ：确保逐页精确吸附，不跳页。 -
scroll-behavior: smooth ：按钮和自动滚动都平滑过渡。 -
overscroll-behavior-x: contain ：阻止横向滚动穿透到页面外层。 -
scale + opacity + transition ：通过缩放和透明度区分当前页与非当前页。
交互逻辑
- 每 4 秒自动滚动一屏，末尾自动回到起点。
- 悬停、触摸、聚焦时暂停自动轮播，避免打断用户操作。
- 左右箭头每次按容器宽度切换一页。