How to Add and Remove Items From a Native CSS Carousel (…with 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).

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+:

**::scroll-marker**: a generated element that links to a scroll target in a scroll container (behaves like an <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>)

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.

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 carousel items have been added to the carousel.

The carousel itself is an unordered list (<ul>) with list items (<li>) inside (in terms of accessibility, I think this is the best markup). Prior to that we have some checkboxes, which users can toggle to add and remove the carousel items, and for the purpose of this walkthrough I’ve pre-selected a few of them using the checked attribute. Finally, we wrap all of that, establishing our overall component. This part is important because we’ll be seeing which checkboxes within it aren’t checked, and then hiding the corresponding carousel items — also within it — based on that:

<div class="component"> <input type="checkbox" id="i1"><label for="i1">Toggle slide 1</label> <input type="checkbox" id="i2"><label for="i2">Toggle slide 2</label> <input type="checkbox" id="i3" checked><label for="i3">Toggle slide 3</label> <input type="checkbox" id="i4" checked><label for="i4">Toggle slide 4</label> <input type="checkbox" id="i5" checked><label for="i5">Toggle slide 5</label> <ul class="carousel"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div>Code language: HTML, XML (xml)

First we rein in the carousel’s width using max-width, then we make the height half of whatever the computed width is using aspect-ratio. Just a little responsive design.

After that, we see which checkboxes aren’t checked, and then hide the corresponding scroll targets/carousel items. For example, this is what we do for the first checkbox and carousel item:

.component:has(input:nth-of-type(1):not(:checked)) {}: select the component, which contains an input, the first of which isn’t checked
li:nth-of-type(1) {}: within that, select the first carousel item
display: hidden: and hide it

That covers the adding-and-removing logic. What’s even better is that those checkboxes can be used to submit data, so if you were to mark up the component as a <form>, you do form-like things with it, like serialize the data and save it.

In the next section, we declare placeholder styles for when no checkboxes are checked (.component:not(:has(input:checked))). This conditional :has() block (and certain others) isn’t required, but it’s a great way of clarifying what, when, and why, for other developers and for yourself if you come back to the code later.

If at least one checkbox is checked (.component:has(input:checked)), the carousel receives display: flex, which makes the carousel items flow horizontally, while the carousel items within receive min-width: 100%, which ensures that only one carousel item is displayed at a time.

The final block runs if multiple checkboxes are checked (.component:has(input:checked ~ input:checked), which translates to “if a checked checkbox is immediately or non-immediately followed by another checked checkbox”). This is where the code for the scroll markers, scroll buttons, and scroll behaviors will go.

.component { ul.carousel { max-width: 738px; aspect-ratio: 2 / 1; } &:has(input:nth-of-type(1):not(:checked)) { li:nth-of-type(1) { display: none; } } &:has(input:nth-of-type(2):not(:checked)) { li:nth-of-type(2) { display: none; } } &:not(:has(input:checked)) { ul.carousel { background: #eee; } } &:has(input:checked) { ul.carousel { display: flex; li { min-width: 100%; } } } &:has(input:checked ~ input:checked) { } }Code language: CSS (css)

Continuing from where we left off, let’s revisit the carousel. Keep in mind that we’re working within the context of multiple checkboxes being checked (.component:has(input:checked ~ input:checked), which means that the carousel items that are visible will horizontally overflow the carousel unless we declare overflow: hidden (or overflow: scroll if you want to allow manual scrolling).

Next, by default, scroll buttons enable users to scroll 85% of the scrollport, but we’re looking for a slideshow-type behavior where one complete slide is shown at a time, so we’ll need to set up scroll snapping for the additional 15%. scroll-snap-type: x will do exactly that for the x-axis. We’ll figure out the exact alignment in a moment.

Complimenting that, scroll-behavior: smooth will ensure that users snap to the carousel items smoothly when using the scroll buttons (and scroll markers).

anchor-name: --carousel turns the carousel into an anchor, naming it --carousel. This will enable us to align the scroll buttons (and scroll markers) relative to the carousel, but again this is something that we’ll do in a moment.

The scroll-marker-group property relates to the ::scroll-marker-group pseudo-element that’s generated whenever a scroll marker is generated. It’s basically the container for the scroll markers, where the value of scroll-marker-group determines whether ::scroll-marker-group is inserted before or after the carousel’s content (similarly to ::before/::after), affecting tab order. You must set scroll-marker-group to either before or after.

Treat ::scroll-marker-group like any other container. For example, display: flex; gap: 1rem; will make the scroll markers flow horizontally with 1rem of spacing between them. After that, we combine position: fixed and position-anchor: --carousel (--carousel refers to the anchor that we named earlier) to align the container relative to the carousel, then justify-self: anchor-center to align it horizontally and bottom: calc(anchor(bottom) + 1rem) to align it 1rem from the bottom.

The scroll markers are pseudo-elements of the scroll targets (so li::scroll-marker), which makes sense, right? One marker for every scroll target. But as mentioned before, they’re inserted into ::scroll-marker-group, not the scroll targets, so where you select them isn’t where they’re inserted. After your brain has reconciled that (it took me a minute), you’ll need to set their content property. We’re using stylized markers here, so we’ve set them to an empty string (content: ""), but you can insert whatever content you want inside of them, and even number them using CSS counters.

After that you’re free to style them, and if you want to take that a step further, ::scroll-marker has three pseudo-classes:

:target-current: the active scroll marker
:target-before: all scroll markers before the active one
:target-after: all scroll markers after the active one

Note: the pseudo-class must be prefixed by the pseudo-element:

:target-current { } ::scroll-marker { &:target-current { } } ::scroll-marker:target-current { }Code language: CSS (css)

This is the full (step 2) CSS code:

ul.carousel { overflow: hidden; scroll-snap-type: x; scroll-behavior: smooth; anchor-name: --carousel; scroll-marker-group: after; &::scroll-marker-group { display: flex; gap: 1rem; position: fixed; position-anchor: --carousel; justify-self: anchor-center; bottom: calc(anchor(bottom) + 1rem); } li::scroll-marker { content: ""; width: 1rem; aspect-ratio: 1 / 1; } li::scroll-marker:target-current { background: white; } li::scroll-marker:target-before { background: hsl(from white h s l / 50%); } li::scroll-marker:target-after { background: red; } }Code language: CSS (css)

In this final step we’ll add the scroll buttons, which are pseudo-elements of the scroll container (the carousel in this case). ::scroll-button() accepts five physical values for its only parameter:

::scroll-button(*)
::scroll-button(left)
::scroll-button(right)
::scroll-button(up)
::scroll-button(down)

As well as four logical values:

::scroll-button(block-start)
::scroll-button(block-end)
::scroll-button(inline-start)
::scroll-button(inline-end)

They too must have valid content properties like the scroll markers, otherwise they won’t show up. In today’s example we’re only using ::scroll-button(left) and ::scroll-button(right), inserting directional arrows into them, but only when enabled (e.g., ::scroll-button(left):enabled). When they’re :disabled (which means that it’s impossible to scroll any further in that direction), no content property is set (which, again, means that they won’t show up).

We also use anchor positioning again, to align the scroll buttons relative to the carousel. ::scroll-button(*) selects all scroll buttons, which is where most of this logic is declared, then of course ::scroll-button(left) and ::scroll-button(right) to align the individual buttons to their respective edges.

And finally, we also declare scroll-snap-align: center on the carousel items (<li>), complimenting the scroll-snap-type: x that we declared on the carousel earlier, which ensures that when users click on these scroll buttons, they don’t scroll 85% of the scrollport. Instead, they snap to the scroll target fully.

ul.carousel { &::scroll-button(*) { position: fixed; position-anchor: --carousel; align-self: anchor-center; } &::scroll-button(left):enabled { content: "⬅︎"; left: calc(anchor(left) + 1rem); } &::scroll-button(right):enabled { content: "⮕"; right: calc(anchor(right) + 1rem); } li { scroll-snap-align: center; } }Code language: CSS (css)

And here’s the same thing but vertical:

These features are really cool. They can be used in so many different ways, from tabs to pagination. To throw in a more a real-world example of what we explored here today, a carousel showing product photos:

Just choose the color that you want and that’s what the carousel will show!