Reviews Carousel
An elegant carousel component for displaying testimonials and reviews with smooth spring animations and keyboard navigation.
Installation
npx smoothui-cli add reviews-carouselFeatures
- Smooth spring-based animations for card transitions
- Keyboard navigation (Arrow keys)
- Auto-play support with configurable interval
- Customizable indicators and navigation buttons
- Respects
prefers-reduced-motionfor accessibility - Stack-based card layout with depth effect
- Blur and opacity effects for inactive cards
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
ArrowLeft | Navigate to the previous review |
ArrowRight | Navigate to the next review |
ARIA Attributes
| Attribute | Element | Purpose |
|---|---|---|
aria-label | Navigation buttons | Labels for "Anterior" (previous) and "Siguiente" (next) buttons |
aria-label | Indicator buttons | Labels each indicator with its position number |
type="button" | All buttons | Prevents implicit form submission |
disabled | Navigation buttons | Disables previous/next when at the bounds |
Screen Reader
- Reviews use semantic
figureandfigcaptionelements withblockquotefor proper review structure. - Navigation state is communicated through disabled button states.
Reduced Motion
This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, card scale, vertical offset, blur, and opacity transitions use instant 0ms durations instead of spring animations.