Carousel Gallery Block for React

Each picture in PICTURES has a title, a place, a year and a scene; add your image's address to it and replace the Scene in the slide with <img alt="" className="size-full object-cover" src={…} /> (the figure's caption already names it). The comment above Scene says where. Keep the pictures one shape, 4 wide for 3 high, or change RATIO and the aspect-4/3 class together.

The track shows 1.15 pictures on a phone, 2.3 from md and 3.3 from lg, so a part of the next picture always shows. The counter and the dots count whole pictures: "4–6 of 9" means pictures four to six are fully in view. Off-view slides are hidden from the tab order and from screen readers, so only what you can read is reachable. The slides' widths are set in percentages, and Embla's align: "start" lines them up with the rail.

Tab reaches the previous and next buttons and the dots. With focus on any of them, the arrow keys turn the track (mirrored in a right-to-left layout), and Enter or Space on a dot goes to that picture. Previous and next wrap around, so a button never disables while it has focus. The counter is a polite live region, so a screen reader hears "5–7 of 9" after a move.

Yes. The track follows a finger and snaps to a picture; the buttons and dots do the same. Under reduced motion the transitions are still, the pictures simply change place.

The track runs right to left, the chevrons mirror, and the arrow keys follow the reading direction. The counter and the place and year under each picture are isolated so mixed text stays in order.

Yes. The pictures mix your foreground, background and muted tokens, so they print dark on pale grey in a light theme and turn low-key in a dark one. The block ends on the dots band with no closing line, so the next section's top rule closes it.