这是一款完全不用 JavaScript 的轮播图组件。左右翻页按钮、底部圆点指示器、当前页高亮、到头自动禁用——这些平时都得靠脚本实现的功能，这里全部由 CSS 的原生滚动伪元素直接生成。轮播共 10 张，滚动带吸附对齐，鼠标滚轮、拖拽、点圆点、按方向键都能翻页，键盘焦点样式也做了。更有意思的是它内置了 缩放、淡入、翻转、下移、右移、换位 六种切换动效，改一个变量就能整体换风格。

这款纯 CSS 轮播图组件的四个亮点

按钮和圆点不是写出来的：由浏览器根据内容自动生成，加减一张幻灯片，圆点数量自动跟着变。
六种切换动效内置：缩放、淡入、翻转、下移、右移、换位，切换只需改一个变量。
无障碍开箱可用：原生生成的控件自带键盘导航与焦点管理，不用手写 ARIA。
做了完整降级：老浏览器下退回普通的横向滚动容器，并给出明确提示，不会变成一堆错位的图。

不用 JavaScript 怎么做出翻页按钮和指示器

其一，控件交给浏览器生成。轮播容器只要声明一次"我需要一组标记"，浏览器就会为每个子项自动生成一个圆点，翻页按钮同理，并且滚到第一张时"上一张"按钮自动变为禁用态——这套联动过去至少要几十行脚本：

scroll-marker-group: after;

所以增删幻灯片时，你只管改 HTML，控件会自己对上。

其二，"当前是哪一张"用滚动状态查询来判断。幻灯片能感知自己有没有被吸附到位，从而触发进场动效。这意味着动画时机不再依赖滚动事件的节流与计算，而是浏览器自己判断，天然跟手、不会错帧。六种动效正是围绕这个状态各写了一组，用容器样式查询按变量分流。

其三，按钮位置靠锚点定位。翻页按钮和圆点组不是用绝对定位硬算坐标，而是"锚"在轮播容器和指示器组上，容器尺寸变化时自动跟随，响应式下不用写一堆媒体查询去校正位置。

怎么换成自己的图片与切换效果

只有 HTML 和 CSS 两个文件。每张幻灯片就是一个 article，里面放标题和图片，复制一段即可新增，数量不限，控件会自动适配。图片放进 img 目录改路径就行。

切换动效由样式表顶部的一组开关变量控制，把想要的那一种置为生效即可，源码中每种效果都有对应注释。圆点大小、按钮样式、吸附强度、幻灯片间距同样是集中定义的变量，改配色不需要翻遍整个文件。

兼容提示：滚动伪元素与滚动状态查询属于较新的 CSS 能力，建议在 Chrome / Edge 135+ 上查看完整效果。素材内置了特性检测，不支持的浏览器会退回可横向滚动的图片列表并给出提示，内容依然完整可见。运行方法参见压缩包内的帮助文档。

关于这款 CSS 轮播组件的常见问题

幻灯片数量有限制吗？

没有。指示器圆点由浏览器按子项数量自动生成，加到几十张也不用改样式，这正是它相比手写轮播最省心的地方。

能改成自动播放吗？

组件本身是滚动驱动的，没有自动播放。确实需要的话，加一段很短的定时滚动脚本即可，不影响按钮与指示器的原生行为。

图片尺寸要统一吗？

建议统一，视觉上更整齐。样式里已对图片做了等比填充处理，比例略有出入不会撑破布局，但差异过大时构图会被裁掉一部分。

手机端能滑动吗？

可以。容器本身就是原生滚动区域，触屏左右滑动天然支持，并带吸附对齐，手感和原生 App 的轮播接近。

适用场景

适合产品图展示、首页 banner、案例集、活动页图集等常规轮播需求，尤其适合追求轻量、不想为一个轮播引入整个 JS 库的项目。也是学习 CSS 原生滚动控件的完整参考，源码可下载后本地查看。