Vertical Carousel Gallery Block for React

Each chapter in CHAPTERS has a title, a time, a summary and a scene. Replace the Scene in the slide with <img alt="" className="size-full object-cover" src={…} /> (the caption on the picture names it). The viewer is 4 wide for 5 high; change RATIO and the aspect-4/5 class together.

Tab reaches the Up and Down buttons and the chapter rows. On either button, the Up and Down arrow keys turn the viewer; on a chapter row, they move to the previous or next chapter and focus follows, so the index works like a vertical list. Enter or Space on a row goes to its picture. Down on the last chapter goes to the first, and Up on the first goes to the last.

The block keeps one page number. The viewer, the "Chapter 2 of 4" line (a polite live region) and the index all read it, and the row for that chapter carries aria-current and a bar at its start edge. The block keeps Embla's API and follows its select event, so a drag on the viewer updates the index too.

It is hidden below lg, where the viewer already has the controls, and the line under the viewer names the chapter. The viewer stays 4 wide for 5 high but narrower, so the picture is never cropped.

No. The carousel only moves when you press a button, a row or an arrow key, or drag it.

Yes. The pictures mix your theme's tokens, and the divider and marks are the same hairlines as the rest of the page. The block ends on its last row with no closing line.