It’s kind of amazing how far HTML and CSS will take you when building a carousel/slideshow.
- Setting some boxes in a horizontal row with CSS Flexbox is easy.
- Showing only one box at a time with
overflowand making it swipable with
- You can make the “slides” line up nicely with
- A couple of
#jump-linksis all you need to make navigation for it, which you can make all nice and smooth with
Christian Schaefer has taken it a little further with next and previous buttons, plus an auto-play feature that stops playing once interaction starts.
About that auto-play thing — it’s a bonafide CSS trick:
- 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 🤯
And speaking of how far we can get with HTML and CSS, here are a few related takes on image carousels and galleries.
- How to Make a CSS-Only Carousel (Robin Rendle)
- How To Build an Infinite Scroll Image Gallery with React and CSS Grid (DigitalOcean)
- Carousels Don’t Have to Be Complicated (Chris Coyier)