Media Carousel Reviews Block for React

Each picture is drawn by Scene from scene data, with a comment above it that says what to swap. Replace the <Scene ratio={RATIO} scene={picture.scene} /> inside the tile's button with <img alt="" className="size-full object-cover" src={picture.src} />, add src to PICTURES, and keep the button's visible and screen-reader text; the description is read out beside the caption as the picture's alt text. Keep every picture the same ratio so the tiles line up.

Add an object to PICTURES with an id, title, group, description, scene (or src) and its review, and add the group to CHOICES if it is new. The filter counts, "Picture 3 of 6", the page count and the height of the review band all come from that list.

It never plays by itself. Previous and Next wrap around the pages, a page is one picture, and the line under the strip says "Page 2 of 4". Pictures out of view cannot be focused or read; on the pages in between they scroll into view. When a filter leaves everything in view, the buttons stay but do nothing and the line says so. The Carousel is Embla: the block holds its api, reads the page from selectedScrollSnap and the page count from scrollSnapList, and each slide is a labelled group. Embla does not mirror its own arrow keys in a right-to-left page; the Previous and Next buttons do.

Which pictures the strip holds. The counts in the labels are worked out from the list. If the picture you had picked is not in the new group, the first picture of that group is picked instead, and its review shows below. The strip is keyed by the filter, so it restarts at its first page.

Yes. The strip scrolls from the start side, the chevrons mirror, and dates, counts and the page line are isolated so digits keep their order. The pictures are drawings and never mirror.