Carousels Without JavaScript? The Pieces Are All in CSS

Building a slideshow with nothing but HTML and CSS has long been surprisingly practical, and a core set of layout and scrolling features covers most of the work. A horizontal row of boxes comes free with Flexbox. overflow hides the off-screen slides, while overscroll-behavior keeps the swiping gesture from bubbling up to the page. scroll-snap-type aligns each slide neatly into view, and anchor links with scroll-behavior give you simple navigation between slides.

Christian Schaefer has pushed the approach further by adding working prev/next buttons and a self-playing mode that concedes control as soon as the user interacts. The real highlight is that autoplay trick, which works without a line of scripting:

  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 🤯

How Far You Can Push the Markup

JavaScript-driven carousels such as those built with Flickity remain a solid route, especially when you need complex behavior. But there is a particular satisfaction in achieving the same outcome with far less code, and the technique keeps maturing as browser support for scroll-driven features grows.

Several other write-ups explore the same terrain from different angles:

The good news for anyone who likes the sound of a pure CSS approach: the platform is moving toward making it even more direct. Chrome is already prototyping dedicated carousel features in CSS, including scroll buttons and scroll markers for slide navigation. Full details are covered in a newer article on the topic.