Full-Width Slider Gallery Block for React

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.

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.

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.

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.

The slides become 16:9, the caption's sentence is dropped to save room, and the thumbnail rail is a snap scroller that shows a little over two thumbnails, with the one you choose in view.

Yes. The pictures and the foot that fades into the page use your theme's tokens, so it reads in a light theme and in a dark one. The block ends on the thumbnail rail with no closing line, so the next section's top rule closes it.