demo · v132

::scroll-button() pseudo-elements

The carousel below uses the new ::scroll-button() pseudo-elements for prev/next. No JS wires the buttons — CSS alone generates them and the engine activates them when the user clicks. A JS fallback handler is provided if the browser doesn't support the pseudo yet.

checking support…
.carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.carousel::scroll-button(left)  { content: "<"; }
.carousel::scroll-button(right) { content: ">"; }
.carousel::scroll-button(*):disabled { opacity: .35; }

see also