Fancy Testimonials Slider
A polished, animated testimonial carousel with customizable themes and transitions.
1Installation
npm i elementra-ui
2Add Components Using CLI
npx elementra-ui add
Select components using the up/down arrow keys. Press spacebar to select multiple components, then press enter to add them to your src folder.
EldoraUI's components make building UIs effortless and enjoyable!
3:Standard testimonials with purple theme
Import and use the FancyTestimonialsSlider component in your project.
EldoraUI's components make building UIs effortless and enjoyable!
4:Custom color testimonials with zoom animation
Import and use the FancyTestimonialsSlider component in your project.
EldoraUI's components make building UIs effortless and enjoyable!
5:Interactive testimonials with slide animation
Import and use the FancyTestimonialsSlider component in your project.
EldoraUI's components make building UIs effortless and enjoyable!
6:Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| testimonials | array | required | Array of testimonial objects with img, quote, name, and role properties |
| colorVariant | string | 'purple' | Color theme: 'purple', 'blue', 'green', 'amber', 'red', 'gray', 'black', or custom hex color |
| animationPreset | string | 'default' | Animation style: 'default', 'fade', 'slide', 'zoom' |
| size | string | 'md' | Size of the slider: 'sm', 'md', 'lg' |
| autorotate | boolean | true | Whether testimonials should automatically rotate |
| autorotateTiming | number | 7000 | Time in milliseconds between testimonial transitions |
| className | string | undefined | Additional CSS classes to apply to the component |
7:Testimonial Item Structure
{
img: string, // URL to the testimonial author's image
quote: string, // The testimonial text content
name: string, // Name of the testimonial author
role: string // Role or company of the author
}