CSS scroll-snap 轮播（滑块）生成器

CSS scroll-snap 轮播（滑块）生成器: 用途

照片或卡片轮播在电商网站中很常见，但滑块库体积大，有时还会让手机上的滚动卡顿。

本生成器使用 CSS 的 scroll-snap，借助浏览器原生滚动让每一项吸附对齐：手指拖动很顺滑，支持触控板和键盘，几乎没有 JavaScript。可选择电脑和手机上每次显示的项数（包括一项再加下一项的一部分，提示可以拖动）、间距和圆角。不含自动轮播，因为它会妨碍阅读和无障碍（WCAG 2.2.2）。

使用方法

1. 粘贴图片地址。
2. 选择每次显示的数量和间距。
3. 复制代码并粘贴到网站。

使用场景

• 商品橱窗。
• 作品和作品集照片。
• 评价或服务卡片。

常见问题

为什么用 scroll-snap 而不是库？

scroll-snap 使用浏览器原生滚动：手机上拖动像 Instagram 一样顺滑，支持触控板和键盘，几乎没有负担。滑块库为了做同样的事，往往要加上几十 KB 的 JavaScript。

轮播会自动播放吗？

不会，这是有意为之。自动轮播会妨碍阅读，也是无障碍问题（WCAG 2.2.2 要求能暂停移动超过 5 秒的内容）。想看更多的用户可以拖动或使用箭头。

可以用于文字卡片吗？

可以。把图片换成列表每项中的任何内容；尺寸和吸附方式保持不变。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具