Native CSS Carousels with ::scroll-button and ::scroll-marker

Figure 1: A CSS-only carousel using the new ::scroll-markers to indicate the current item.

The CSS Overflow Module Level 5 introduces two powerful new features for scrollable containers: ::scroll-buttons and ::scroll-markers.

These features enable native, customizable scroll controls and indicators, making it easier to build accessible, visually consistent carousels and scrollers without JavaScript.

Note: As of now, browser support for these features is limited. Check the Baseline status below for the latest updates.

What Are Scroll-Buttons?

Scroll-buttons are interactive elements rendered by the browser at the edges of a scrollable container. They allow users to scroll the content by clicking or tapping, and can be styled with CSS.

Key features:

Appear at the start/end of a scrollable axis.
Can be styled and positioned using new pseudo-elements like ::scroll-button(inline-start) and ::scroll-button(inline-end).
Support for custom content via the content property.

What Are Scroll-Markers?

Scroll-markers are visual indicators that represent scroll positions or items within a scrollable container. They help users understand their position within the scroll area.

Key features:

Rendered for each scroll-snap point or item.
Can be styled with ::scroll-marker and grouped with ::scroll-marker-group.
The :target-current pseudo-class highlights the marker for the currently visible item.

Demo

With Default Buttons

This demo uses Anchor positioning to layout the scroll buttons.

Anatomy of a Scrollable Container

Below is a breakdown of the new elements:

::scroll-marker::scroll-marker:target-current::scroll-marker

::scroll-marker::scroll-marker::scroll-marker:target-current::scroll-marker::scroll-marker

::scroll-button(inline-start)::scroll-button(inline-end)::scroll-marker-group

How to Use Scroll-Buttons and Scroll-Markers

import "./styles.css";

document.getElementById("app").innerHTML = `
<section class="container">
  <ul class="scroller">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
    <li class="item">Item 4</li>
    <li class="item">Item 5</li>
  </ul>
</section>
`;

Open Sandbox

Conclusion

With the new ::scroll-buttons and ::scroll-markers features, you can create carousels and scrollers that are not only visually appealing but also accessible to all users. And the best part, you can do it all with just CSS! No tedious JavaScript or 3rd-party libraries are needed.