如何在原生 CSS 轮播中添加和移除项目（…使用 CSS）

The CSS Overflow Module Level 5 defines specs for scrolling controls that enable users to navigate overflow content without manually scrolling (like click-and-dragging the scrollbar, the trackpad, a scrollwheel, or the like). This includes scroll buttons, which enable users to scroll 85% of the scrollport, unless scroll snapping is enabled, as well as scroll markers, which enable users to skip to specific scroll targets (direct children of the scroll container).

CSS 溢出模块第 5 级定义了滚动控件的规范，使用户能够在不手动滚动的情况下导航溢出内容（例如点击并拖动滚动条、触控板、滚轮等）。这包括滚动按钮，使用户能够滚动 85% 的滚动区域，除非启用了滚动捕捉，以及滚动标记，使用户能够跳转到特定的滚动目标（滚动容器的直接子元素）。

These buttons and markers make themselves present via CSS pseudo-elements. At the time of this writing, these pseudo-elements are only supported in Chrome 142+:

这些按钮和标记通过 CSS 伪元素呈现。在撰写本文时，这些伪元素仅在 Chrome 142+ 中受支持：

**::scroll-marker**: a generated element that links to a scroll target in a scroll container (behaves like an <a>)
**::scroll-marker**: 一个生成的元素，链接到滚动容器中的滚动目标（表现得像一个 <a>）
**::scroll-button**(<direction>): a generated element that scrolls 85% of the scrollport, where <direction> can be up , down, left, right, or all (behaves like a <button>)
**::scroll-button**(<direction>): 一个生成的元素，可以滚动 85% 的滚动区域，其中 <direction> 可以是 up、down、left、right 或 all（表现得像一个 <button>）

There are many ways that we can leverage these CSS features. I’ll share some of them throughout this article, but focus on one in particular: a standard CSS carousel. We’ll use all the bells and whistles mentioned above and one extra twist, the ability to add and remove items from it.

我们可以利用这些 CSS 特性的方法有很多。我将在本文中分享其中一些，但特别关注一个：标准的 CSS 轮播。我们将使用上述提到的所有功能和一个额外的变化，即添加和移除项目的能力。

This functionality would be ideal for showing product photos according to user-defined variables such as color or size, or showing items handpicked by users, just to give to two examples.

此功能非常适合根据用户定义的变量（如颜色或尺寸）显示产品照片，或显示用户精心挑选的物品，仅举两个例子。

Ready to dig in?

准备好深入了解了吗？

In this first step, I’m just going to walk you through the HTML, the carousel’s dimensions, and how we determine which ...