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:
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:
- first I slowly offset the scroll snap points to the right, making the scroll area follow along due to being snapped to them.
- after having scrolled the width of a whole slide, I deactivate the snapping. The scroll area is now untied from the scroll snap points.
- Now I let the scroll snap points jump back to their initial positions without them "snap-dragging" the scroll area back with them
- Then I re-engage the snapping which now lets the scroll area snap to a different snap point 🤯 Whatever... look at the code 🙃
Top comments (2)
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.)
good jop