超高速轻型滑轨和旋转木马

滑块和旋转木马

大多数网站都使用滑块和轮播图来展示各种内容，尤其用于展示图片，例如产品详情等。

它们都需要在移动设备上表现出色——这意味着触控支持、性能和用户体验都必须非常好。

旧世界

解决这个问题的方法是使用某种 JavaScript 库来处理这类操作。大多数这类库都利用 DOM 上的各种事件来检测触摸、移动、拖拽等操作。然后还需要编写大量的代码来处理实际的滑动效果，包括动画和 HTML 元素的移动。

这种方法的结果是产生了一些相对较大的 JavaScript 库，很容易占用 25-100kb 的空间——而且由于 JavaScript 的数量庞大，很难获得非常好的性能，WCAG 支持也有些滞后，设置也相对复杂。

新大陆

幸运的是，浏览器发展迅速，滑动和轮播体验可以使用浏览器原生功能和简单的 div 溢出来处理。

通过利用滚动功能，特别是触摸支持，可以大大提高用户体验，因为所有浏览器、设备及其输入方式都支持滚动。

此外，加载、事件监听器、动画、移动 div 元素等操作也不再需要——浏览器会自动处理这些。

结果——超强的性能和触控支持！

基本方法

创建一个overflow-x设置为自动的div元素
display:grid在该 div 元素内，使用grid-* 选项创建一个 CSS 网格，以创建将作为幻灯片的列。
使用滚动捕捉功能scroll-snap-type: x mandatory，scroll-snap-align确保幻灯片能够紧贴滑动容器。



<style>
    .slider {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        display: grid;
        grid: auto / auto-flow max-content;
        grid-auto-rows: 100%;
        grid-auto-columns: 100%;
        grid-auto-flow: column;
        grid-gap: 1rem;
        align-items: center;
        height: 100%;
    }

    .slider>* {
        scroll-snap-align: start;
    }
</style>

<div class="slider">
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
    <div>Slide 4</div>
</div>