The CSS Podcast 94: CSS carousels (and scroll)
Oct 29, 2025
Explore the new CSS scroll APIs that allow for creating stunning carousels without any JavaScript. Discover how these features enhance user experience in real-world applications like app stores. Learn about styling scroll buttons, hiding scrollbars, and empowering accessible markers. Dive into creating interactive designs with :target-current and simple scroll-spy patterns. Uncover how to combine modern CSS techniques for dynamic web environments. This episode is packed with practical tips for web developers!
AI Snips
Chapters
Transcript
Episode notes
Carousels Are Just Scrollers
- Carousels are fundamentally scrollable containers that show and hide off-screen content to manage limited space.
- Thinking of them as scrollers reframes design problems and reveals simpler CSS solutions.
Basic CSS Carousel Setup
- Start a CSS carousel with overflow-x: auto and scroll-snap-type: x mandatory.
- Give children scroll-snap-align: center so items snap into place on swipe.
Hide Scrollbars Without Breaking Scrolling
- Hide native horizontal scrollbars with scrollbar-width: none while keeping the area scrollable.
- Avoid overflow:hidden so users can still swipe or scroll the carousel.