shadcn.io is not affiliated with official shadcn/ui
Testimonials Multi-Up Carousel Block for Solid
A quote carousel for an accounting platform that shows one, two or three cells per page by screen width, in a hairline-ruled band, paged with previous and next buttons and a Page 1 of 2 count in the heading row, or with the arrow keys.
Installation
Overview
A testimonials carousel for when you have more quotes than room, from a fictional accounting platform, Ledgerline. A start-aligned heading cluster sits at the left of one row and the controls at the right: a "Page 1 of 2" count with a previous and a next button. Below, six quotes sit in one band with a rule above and below and + marks on its corners, in cells ruled apart by hairlines: three to a page on a wide screen, two on a tablet and one on a phone; the count follows, so the same six quotes are "Page 1 of 2", "Page 1 of 3" or "Page 1 of 6". Each cell has five stars in the text colour, the quote with its first sentence in bold and the rest muted, and the author's avatar, name, role and company. Nothing moves on its own, so there is no autoplay to pause. It's built from Carousel, Avatar, Button and Guides, with CSS transitions for the entrance. For homepages, product pages and pricing pages that want six or more quotes in the room of one row of cells.
FAQ
How do I change the quotes?
Edit REVIEWS at the top of the file: each entry has a lead (the opening sentence, in bold), the rest of the quote, and the person's name, role, company and initials. Every card shows five stars; the rating is decorative, so a screen reader reads "Rated 5 out of 5" and nothing is counted or averaged. Keep the number of quotes divisible by 2 and 3 (six or twelve) so the last page is full at every width; with another number the last page simply holds fewer cells.
How are the cells per page chosen?
md and lg breakpoints: one cell below 48rem, two from 48rem, three from 64rem. The COLUMNS classes set the carousel's --slides-per-page for the stylesheet, so the cells are the right size before the page runs; a small effect reads the same two media queries to tell the carousel how many cells a page holds, which is what page and the "Page 1 of 2" count are counted in. The carousel's spacing is zero, so the hairline between cells is the end border of every cell except the last on a page.Turn the browser window narrower or wider and the page count updates to match.How does the carousel work on each library?
slidesPerPage sets the page size and page and onPageChange keep the current page in React state. Slides on other pages are inert.The previous and next buttons wrap around, from the last page to the first, so they never end up disabled under a visitor's focus.Can visitors page through the quotes with a keyboard?
Yes. The previous and next buttons are real buttons in the tab order, and with focus on either of them the left and right arrow keys turn the page too. The cells on other pages are inert, so Tab never lands on a card that isn't on screen.
What does a screen reader announce?
The carousel is a region named "Customer quotes", and each slide is a group named by its person and position, such as "Felix Brandt, 2 of 6". The quote is a blockquote inside a figure with the author as the caption; the stars and the avatar are hidden, and the rating is read as text. When a visitor turns the page, the new cells are announced politely, and the "Page 1 of 2" count is read as plain text.
What changes with reduced motion, and what about right-to-left?
The heading and the cells appear without their entrance. Turning the page still works the same way; nothing moves on its own. In a right-to-left page the layout mirrors: the heading moves to the end and the controls to the start, their arrows flip, and the first cell is at the start.