Scroll-Driven Carousel Builder

A scroll-driven carousel uses CSS Scroll Snap and Scroll Timeline to create a slider that responds to the user's scroll input — no JavaScript required. As the user scrolls (horizontally or vertically), slides snap into place naturally, and progress indicators animate in sync with the scroll position using the new animation-timeline: scroll() CSS feature. This provides buttery-smooth 60fps performance because it runs on the browser's compositor thread.

Scroll Snap is widely supported across all modern browsers (Chrome 69+, Firefox 68+, Safari 11+, Edge 79+). Scroll Timeline (animation-timeline: scroll()) is supported in Chrome 115+ and Edge 115+ (August 2023). Firefox and Safari are actively implementing it. The generated code includes fallback behavior — the carousel and snap work everywhere, while the progress bar gracefully degrades in unsupported browsers.

Traditional JS carousels use setInterval, requestAnimationFrame, or touch event listeners, which can cause jank on the main thread. A CSS scroll-driven carousel offloads all animation to the GPU compositor thread, resulting in smoother motion. It's also lighter (zero JS bytes), more accessible (native scroll behavior), and respects user preferences like prefers-reduced-motion. The tradeoff is that it requires actual scroll interaction rather than auto-play, though you can add minimal JS for auto-scrolling if desired.

Pure CSS navigation dots that auto-highlight based on scroll position aren't fully possible yet (this requires scroll-state queries, an emerging CSS feature). However, you can use anchor links (<a href="#slide-3">) combined with scroll-behavior: smooth for clickable dot navigation. For auto-highlighting dots, a few lines of JavaScript with an IntersectionObserver or scroll event listener work perfectly as a progressive enhancement.

Yes — because it relies on native scroll, it's inherently keyboard-accessible (arrow keys, Page Up/Down work natively). Screen readers can navigate through slides as they're regular DOM elements. We recommend adding aria-label attributes to the scroll container, role="region" with a meaningful label, and ensuring sufficient color contrast on slide text. The scroll container should also have a visible focus indicator.

The snap transition speed is controlled by the user's scroll velocity — it's not a timed animation. To smooth the snap, use scroll-behavior: smooth on the container. For the progress bar animation, its speed is directly tied to scroll position via animation-timeline: scroll(), so it moves in perfect sync with scrolling. If you want a slower auto-scroll effect, you'd need a small JavaScript helper to programmatically scroll the container.

Absolutely! Replace the slide's background color with background-image: url('your-image.jpg') and set background-size: cover; background-position: center;. The scroll-snap mechanism works identically regardless of slide content — images, videos, cards, or any HTML elements. Just ensure each slide maintains the correct dimensions to fill the scroll container.

CSS scroll-driven carousels are extremely performant. Scroll Snap runs natively in the browser engine with zero main-thread overhead. Scroll Timeline animations run on the compositor thread, achieving consistent 60fps even on lower-end devices. There's no JavaScript bundle to parse or execute, no timers to manage, and no layout thrashing. The total CSS overhead is typically under 1KB gzipped — compared to 5-30KB+ for JavaScript carousel libraries.