A slider made of three design-system documentation sheets stacked from the top centre, built with plain DOM, CSS transforms and no library. The front sheet is full size; the two behind it are scaled down and lifted so only their headers show, each a shade darker. Every step slides the front sheet out to the left with a slight tilt while the stack rises to fill its place, and the sheet that left fades back in at the rear, so the three keep turning like a slider. Each sheet is a full documentation page in the HorizonX style, with the logo mark in its header, an overview, a spotlight list and a working calendar capsule: two sheets pick single days and one picks a range. Drag with a mouse or a finger, click one of the three pagination dots, tap a sheet behind the front one or use the arrow keys; autoplay turns it when the reader is not touching it. The stage is a mid grey by default, so the white sheets and the dark calendar both stand out; it can be set to any colour or to transparent. A live region names the sheet in front, focus is visible, the sheets behind are inert, reduced motion stops autoplay and makes each step instant, and the loop sleeps when the stack is off screen. Stage size, zoom, corner radius, background, header, the three titles, the sheet and calendar colours, autoplay, drag and the dot colours are all editable live, and the export is one HTML file with no library to fetch.
In collections: React Carousels & Image Galleries
Guide: Scroll-Driven and Auto-Drifting Galleries: Choose the Right Motion· React Carousel: Build One With CSS Scroll Snap or a Library· HTML Marquee Is Deprecated: How to Build a Modern Marquee
Carousel · HTML / CSS / JS · All tools