17 / Scroll behaviour

Scroll Buttons

The back and forward arrows come out of the row of items itself, and go grey when there is nothing left that way.

also called ::scroll-button() · generated prev/next · CSS-only controls

The same idea as the markers, for the arrows — and the :disabled state at each end arrives free, which is the part hand-rolled carousels forget. No JavaScript, and each one is a real button to a screen reader.

How it is built

ul::scroll-button(left) { content: '←' } ul::scroll-button(right) { content: '→' } ul::scroll-button(*):disabled { opacity: .25 }