shadcn.io is not affiliated with official shadcn/ui
Full-Width Slider Gallery Block for React Aria
Five architecture projects as 21:9 slides from rail to rail with a masked caption, a numbered thumbnail rail as the navigation, loop and autoplay with a visible Pause that never runs under reduced motion.
Installation
Overview
A full-width slider for React with React Aria, for Voussoir Architects, an architecture practice. Five projects run as 21:9 slides from rail to rail (16:9 on a phone), the title, place and year laid over a masked foot of each picture. Under the slider a numbered thumbnail rail is the navigation: each thumbnail goes to its project, and a thin bar under the current one fills over six seconds and is the timer that turns the slider on. A Pause toggle stops it, and so does keyboard focus inside the slider; with reduced motion it starts paused. Previous and Next buttons and the arrow keys move by hand, and the slider loops. On a phone the rail is a snap scroller. The pictures are drawn: a brick facade, an atrium, a bridge, a tower and a floor plan in your theme's greys. It's built from Carousel, Toggle, Button and Guides. The practice and its projects are made up for the example.
FAQ
How do I use my own photographs?
Each project in PROJECTS has a title, a place, a year, a sentence and a scene. Replace the Scene in the slide and in the thumbnail with <img alt="" className="size-full object-cover" src={…} />. Slides are 21 wide for 9 high (RATIO, aspect-[7/3]) and 16:9 on a phone, and the picture is cropped to fit, so keep the subject near the middle.
How does the autoplay work, and how do I stop it?
The bar under the current thumbnail is a CSS animation, and when it ends the slider goes to the next project, so the timer and the pause can never drift apart. The Pause toggle (pressed means paused) holds the animation, keyboard focus inside the slider holds it too, and the pointer does not. Under reduced motion it starts paused and only the toggle starts it. To change the pace, change the 6s in FILL.
How does it work with a keyboard?
Tab reaches the Pause toggle, Previous, Next and each thumbnail; the arrow keys on any of them step through the projects (mirrored in a right-to-left layout), and Enter or Space on a thumbnail goes to it. Moves you make by hand are announced ("Calder Footbridge, Calder Reach, project 3 of 5"); the timer's moves are not, so a screen reader is not interrupted.
Does it loop?
Yes. Next on the last project goes to the first and Previous on the first goes to the last, so no button disables under focus. Off-screen slides are hidden from the tab order and from screen readers.
Embla runs with loop: true and the block follows its select event.