Der Schepp

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 🙃

The cover image of this post is Carousel spinning in Sunset by bubutu

Webmentions

+10
  1. Christian Schaefer Christian Schaefer
    Oh, ich vermute, da unterstützt Dein Brauser die ASCII-Pfeile nicht. Carzy.
  2. Sven Wolfermann Sven Wolfermann
    Jetzt hauste aber raus 👍 Aber was will der Künstler uns mit den fehlenden Zeichen sagen? ☺️
  4. Johan Ronsse Johan Ronsse
    thx for having an RSS feed, so many websites launch without one these days! :)
  6. Jens Grochtdreis Jens Grochtdreis
    boah, was'n los? Kreativitätsstau? Super. Mach weiter so. Jetzt brauche ich nur noch Zeit und Muße zum Lesen...
  7. Thomas Steiner Thomas Steiner
    Nolan Lawson has written about a similar experiment: nolanlawson.com/2019/02/10/bui…. Something I noticed in your implementation when playing with it on iOS is that the whole page scrolls up when I swipe/scroll the carousel.
  10. Balázs Orbán Balázs Orbán
    Yeah, I guess that's middle ground. (Think at least we both agree IE must go! 😅)
  11. Christian Schaefer Christian Schaefer
    On the less snarky side of things, my suggestion would be to layer a11y on top via JS in all non-IE browsers and leaving a message for IE users explaining that the a11y experience is degraded for them in exchange for a better overall performance.
  12. Balázs Orbán Balázs Orbán
    It has nothing to do with any agencies, and it is always important. 🙃. Defensing a bad solution with "others don't care/don't do it well anyway" is a bad take IMO. Accessibility should not be a choice.
  13. Christian Schaefer Christian Schaefer
    You are talking about the kind of "accessibility" people and especially agencies usually don't care about, but suddenly gets very important when cutting off IE 11 support is the topic?

← Home