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
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.
Use ::scroll-button For Controls
- Use the ::scroll-button(present) pseudo to add left/right or logical-direction controls.
- Instantiate them by setting content to a non-none value and style for placement and accessibility.
Accessible Icons With content Fallback
- Provide accessible labels via the content property like content: '⟨icon⟩/ Scroll left'.
- Use background images or emojis visually and fallback text after a slash for screen readers.