Intro

Chrome 135 adds native CSS carousels, giving developers built-in scroll buttons and markers that turn any scroll area into an accessible slider without JavaScript. The new primitives come from the CSS Overflow 5 specification and are designed to make common carousel patterns faster to build, easier to maintain and more consistent for users and assistive technologies.

{getToc} $title={Table of Contents}

Intro

With the new CSS carousel features in Chrome 135, a carousel is treated as a scroll area that can receive two extra affordances: buttons and markers. Instead of building sliders from scratch with JavaScript, the browser now provides real interactive elements that you style with CSS, while handling roles, tab order and state behind the scenes.

In the article Carousels with CSS , Chrome for Developers shows how new pseudo-elements like ::scroll-button() and ::scroll-marker() work together with scroll snapping, scroll-driven animations and the top layer to create galleries, sliders and product carousels that remain accessible and JavaScript-free by default.

{getCard} $type={post} $title={READ ALSO} $info={More Chrome and web platform updates for front-end developers} $icon={}

Re-imagine the web with CSS carousels: Chrome’s overview of native scroll buttons, markers and accessible carousel patterns.

CSS carousels in Chrome 135 rely on CSS Overflow 5 features to add browser-provided scroll buttons and markers to any horizontal or vertical scroller. Developers opt in with new pseudo-elements and a few lines of CSS, while the browser manages button state, marker links and accessibility. Sites that do not enable the feature keep a regular scroll area, so the new behaviour works as a progressive enhancement.

REMEMBER: Treat CSS carousels as an enhancement on top of regular scroll areas and always test keyboard and screen reader behaviour before shipping to production. {alertSuccess}

Availability and requirements

The new carousel features are available starting in Chrome 135 and other Chromium-based browsers as they adopt CSS Overflow 5. Existing forms and galleries that use classic scrolling continue to work, and you can progressively add ::scroll-button(), ::scroll-marker() and scroll snapping where you want a richer experience.

Because this approach is based on standard HTML and CSS, there is no requirement for extra JavaScript libraries. However, teams should verify how carousels degrade in browsers that do not yet support these primitives, making sure that lists, galleries and hero sliders remain readable and scrollable even without the new UI.

Impact

For theme and template creators, CSS carousels offer a way to standardize sliders across projects without carrying heavy JavaScript components into every build. Native scroll buttons and markers reduce custom code while still allowing brand-level styling for hero banners, product rails and portfolio galleries.

As support expands beyond Chrome, these features could become the default way to implement carousels in design systems and CMS themes. That means cleaner markup, simpler maintenance and a better baseline for accessibility across sites that depend on sliders as key visual elements.

{getCard} $type={custom} $title={Wait} $info={There are more news stories to read...} $icon={}

More information and sources

• Original coverage by the editorial team