Testimonials Portrait Carousel Block for React

Edit STORIES at the top of the file: each story has a quote, the person's name, role, company and initials, and a result with a value ("3 weeks") and the label that follows it ("to rebuild the product surface"). The count, the slide names and the buttons all come from the list, so any number of stories works; four to six is a comfortable length. The count is padded to two digits, so a list past 99 would need the helper changed.

Replace the monogram and the GridPattern inside the framed tile with an image that fills it (object-cover), and keep the result panel on top. Give the image an empty alt when the author's name is already in the caption, which it is here. Keep the tile's height classes (h-52 sm:h-64, and a minimum on wide screens): they hold the slide's height, so a taller photo would make the band grow from one slide to the next.

Yes. The previous and next buttons are real buttons in the footer row, in the tab order, and with focus inside the carousel the left and right arrow keys move between slides too. Next on the last story goes back to the first, and previous on the first goes to the last. The slides that are out of view are inert, so Tab never lands on content that is hidden.

The carousel is a region named "Customer stories", and each slide is a group named by its person and position, such as "Hana Matsuda, 3 of 4". The quote is a blockquote inside a figure, with the author as the caption; the avatar and the grid are decorative and hidden. When a visitor changes the slide, the new one is announced politely. The count is read as "Story 01 / 04".

The header and the band appear without their entrance. The slides still change when the buttons are pressed, and nothing moves on its own. In a right-to-left page the layout mirrors: the portrait and the divider move to the other side. The count and the result values are wrapped so their digits and units keep their order.