DEV Community

Christian Schaefer
Christian Schaefer

Posted on • Originally published at schepp.dev on

A CSS-only Carousel

I've recently read about and discussed CSS Scroll Snapping so often that I felt like I should build a CSS-only carousel based on it. There it is:

Link to Codepen

Here are a few things to note:

Accessibility is in line with all other CSS-only experiments: it can only be considered mediocre in term of semantics and visual indicators. Don't do this in production.

The going forward and back is done via a combination of CSS Scroll Snap together with scroll-behavior: smooth and moving the focus through the slides via anchor links.

The nicest trick I pull off is the one for the auto-forward:

  1. first I slowly offset the scroll snap points to the right, making the scroll area follow along due to being snapped to them.
  2. after having scrolled the width of a whole slide, I deactivate the snapping. The scroll area is now untied from the scroll snap points.
  3. Now I let the scroll snap points jump back to their initial positions without them "snap-dragging" the scroll area back with them
  4. Then I re-engage the snapping which now lets the scroll area snap to a different snap point 🤯 Whatever... look at the code 🙃

Discussion (2)

Collapse
alnj profile image
alnj

Very nice work. Unfortunately the auto-forward doesn't work in Firefox. Possibly due to different snap behavior not coinciding with the keyframes. (I might be totally offbase here.)

Collapse
ahmedanter profile image
Ahmed Anter

good jop