Creating an accessible, functional, and beautiful carousel in WordPress has traditionally meant reaching for a plugin—or writing custom JavaScript. But not anymore.
Thanks to a new CSS spec, CSS Overflow Module Level 5, we can now build fully accessible carousels using nothing but HTML and CSS.
And in this tutorial, I’ll show you how to do it entirely with the Gutenberg Block Editor, no plugins or custom JavaScript required.
Why This Matters: The Power of CSS Overflow Level 5
CSS Overflow Module Level 5 introduces two powerful pseudo-elements:
::scroll-button() – native left/right navigation buttons
::scroll-marker() – native navigation dots (or markers)
These aren’t just cosmetic. They’re fully accessible, keyboard-navigable, and maintained by the browser—meaning no extra ARIA roles or JavaScript.
Benefits:
- Zero JavaScript
- Improved Accessibility
- Cleaner Markup
- Native Performance
- Progressive Enhancement
- The future of carousels is leaner, cleaner, and built right into the browser.
What You’ll Need
WordPress with Gutenberg block editor
A theme that supports block-based layouts (e.g. Twenty Twenty-Four)
A modern browser that supports CSS Overflow Module Level 5 (like Chrome 135+)
Step-by-Step: Build the Carousel in Gutenberg
1) Add a Carousel Container In the Gutenberg editor:
Insert a Group block
In the sidebar:
Set Layout > Orientation to Horizontal
Turn OFF “Allow to wrap to multiple lines”
Under Advanced > Additional CSS Class(es), type:
carousel
2) Add the Carousel Slides Inside your carousel Group block:
Add multiple Group blocks, within each group, add an image — each is a “slide”
Optionally add some padding or background to each for visibility
💡 You don’t need to manually assign classes to each slide — the CSS will target all children of .carousel.
3) Add the Magic CSS
Go to Appearance > Customize > Additional CSS and paste this in:
.carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
position: relative;
gap: 1rem;
padding: 1rem;
}
.carousel > * {
flex: 0 0 80%;
scroll-snap-align: center;
background: #f0f0f0;
padding: 2rem;
border-radius: 8px;
text-align: center;
}
/* Scroll Buttons /
.carousel::scroll-button(left),
.carousel::scroll-button(right) {
content: "◀"; / overridden per direction */
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 0.5rem;
font-size: 1.5rem;
background: rgba(255,255,255,0.8);
border-radius: 50%;
cursor: pointer;
z-index: 10;
}
.carousel::scroll-button(left) {
content: "◀";
left: 1rem;
}
.carousel::scroll-button(right) {
content: "▶";
right: 1rem;
}
/* Optional disabled state styling /
.carousel::scroll-button():disabled {
opacity: 0.3;
cursor: default;
}
/* Scroll Markers (dots) */
.carousel {
scroll-marker-group: after;
}
.carousel > *::scroll-marker {
content: "";
display: inline-block;
width: 0.75rem;
height: 0.75rem;
margin: 0 0.25rem;
background: #bbb;
border-radius: 50%;
}
.carousel::scroll-marker-group {
display: flex;
justify-content: center;
padding: 1rem 0;
}
.carousel > *::scroll-marker:target-current {
background: #333;
}Final Result
A fully scrollable, swipeable, keyboard-navigable carousel
- No JavaScript
- No plugins
- Fully accessible
- Built right into the browser
When Will This Be Fully Supported?
As of May 2025, native CSS-only carousels using ::scroll-button() and ::scroll-marker() are:
Available in Chrome 135+ but require enabling the Experimental Web Platform Features flag
Not yet supported in Firefox, Safari, or Edge (without Chromium)
What’s Coming
Chrome is expected to enable this by default later in 2025 as part of a stable release once testing and feedback wrap up.
Firefox and Safari have not yet announced timelines but are likely to adopt once the spec stabilizes further and gains traction in real-world usage.
Once widely supported, we’ll no longer need to toggle any flags — this will “just work” like any other native CSS feature.
Conclusion
This is just the beginning of what CSS Overflow Module Level 5 unlocks. Native, accessible carousels are a sign of a maturing web platform — one that puts performance, usability, and simplicity front and center.
If you’re building for the future, this is how to do it.
Update 👇
For a deep dive into the accessibility challenges of CSS-only carousels and practical recommendations, check out this excellent article by Sara Soueidan.
Leave a Reply