shadcn.io is not affiliated with official shadcn/ui
Featured Carousel Reviews Block for Svelte
A framed carousel of five editor's picks for a desk chair, each chosen by a rule worked out from ten typed reviews: most helpful, most detailed, best critical, newest verified and longest owned.
Installation
Overview
An editor's-picks carousel for Svelte with Ark UI, for the Peltline Ergo 2, a fictional desk chair. A centred header holds the title and one sentence over a framed carousel: a tinted shell with a + mark on each corner and, inside, a raised card per slide. The five slides are chosen by rules worked out from the ten typed reviews, not by hand: the most helpful, the most detailed (the most words), the best critical review (the most helpful of the 1 and 2 star reviews), the newest verified one and the one from the longest owner. A rule never takes a review an earlier rule took. Each slide names its rule in a badge, says the fact that won it ("37 readers found it helpful"), then shows the full review: stars with their value in words, a title, the text, the reviewer with an initials avatar, a "Verified purchase" mark in words, a fixed date and how long they owned the chair. Previous and Next buttons, a dot per pick and the arrow keys move the carousel, a line says "Pick 3 of 5" and a screen reader hears it politely after the first move. Nothing advances by itself. On a phone the next slide peeks in at the edge. It's built from Carousel, Rating, Badge, Avatar, Button and Guides.
FAQ
How are the five picks chosen?
RULES at the top of the file lists them in the order the slides show: each has a label, an eligible test and a score. The winner of a rule is the highest score among eligible reviews that no earlier rule took, and a tie goes to the newer review. Change a rule, or add one, and the slides, the dots and "Pick 3 of 5" follow. The sentence on each slide ("Written after 14 months with the chair") is built from the winning review's own numbers.
How do I use my own reviews?
Replace REVIEWS, newest first. Each review has an id, name, rating, an ISO date, a title, a body, helpful (votes), owned (months) and verified. Keep at least one review that is verified, one of 2 stars or fewer, and enough that five different reviews can win; otherwise a rule can have nothing eligible left.
How does the carousel move?
It never plays on its own. Press Next, Previous, a dot, or the arrow keys on the slides or either button; the arrows follow the page's direction. Slides that are out of view are inert and hidden from screen readers, so only the current one can be focused or read, and the position is announced once as "Pick 3 of 5, Newest verified".