Data Display Fancy Stable
AnimatedTestimonials
Testimonial carousel with smooth slide animations and optional autoplay
Preview
svelte
<script lang="ts">
import { AnimatedTestimonials } from "fancy-ui-svelte";
import type { Testimonial } from "fancy-ui-svelte";
const testimonials: Testimonial[] = [
{
quote:
"The attention to detail and innovative features have completely transformed our workflow. This is exactly what we've been looking for.",
name: "Sarah Chen",
designation: "Product Manager at TechFlow",
src: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=500&auto=format&fit=crop&q=60",
},
{
quote:
"Implementation was seamless and the results exceeded our expectations. The platform's flexibility is truly impressive.",
name: "Michael Rivera",
designation: "CTO at InnovateSphere",
src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=500&auto=format&fit=crop&q=60",
},
{
quote:
"This solution has significantly improved our team's productivity. The intuitive interface makes complex tasks simple.",
name: "Emily Watson",
designation: "Operations Director at CloudScale",
src: "https://images.unsplash.com/photo-1623582854588-d60de57fa33f?w=500&auto=format&fit=crop&q=60",
},
];
</script>
<div class="flex min-h-[400px] items-center justify-center">
<AnimatedTestimonials {testimonials} />
</div>Installation
pnpm add fancy-ui-svelte
import { AnimatedTestimonials } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { AnimatedTestimonials } from 'fancy-ui-svelte';
</script>
<AnimatedTestimonials />Examples
Basic Usage
svelte
<script lang="ts">
import { AnimatedTestimonials } from "$lib/fancy-ui/animated-testimonials";
import type { Testimonial } from "$lib/fancy-ui/animated-testimonials";
const testimonials: Testimonial[] = [
{
quote:
"The attention to detail and innovative features have completely transformed our workflow. This is exactly what we've been looking for.",
name: "Sarah Chen",
designation: "Product Manager at TechFlow",
src: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=500&auto=format&fit=crop&q=60",
},
{
quote:
"Implementation was seamless and the results exceeded our expectations. The platform's flexibility is truly impressive.",
name: "Michael Rivera",
designation: "CTO at InnovateSphere",
src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=500&auto=format&fit=crop&q=60",
},
{
quote:
"This solution has significantly improved our team's productivity. The intuitive interface makes complex tasks simple.",
name: "Emily Watson",
designation: "Operations Director at CloudScale",
src: "https://images.unsplash.com/photo-1623582854588-d60de57fa33f?w=500&auto=format&fit=crop&q=60",
},
];
</script>
<div class="flex min-h-[400px] items-center justify-center">
<AnimatedTestimonials {testimonials} />
</div>With Autoplay
Auto-advances every 3 seconds.
svelte
<script lang="ts">
import { AnimatedTestimonials } from "$lib/fancy-ui/animated-testimonials";
import type { Testimonial } from "$lib/fancy-ui/animated-testimonials";
const testimonials: Testimonial[] = [
{
quote:
"Outstanding support and robust features. It's rare to find a product that delivers on all its promises.",
name: "James Kim",
designation: "Engineering Lead at DataPro",
src: "https://images.unsplash.com/photo-1636041293178-808a6762ab39?w=500&auto=format&fit=crop&q=60",
},
{
quote: "The scalability and performance have been game-changing for our organization.",
name: "Lisa Thompson",
designation: "VP of Technology at FutureNet",
src: "https://images.unsplash.com/photo-1624561172888-ac93c696e10c?w=500&auto=format&fit=crop&q=60",
},
{
quote: "Implementation was seamless and the results exceeded our expectations.",
name: "Michael Rivera",
designation: "CTO at InnovateSphere",
src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=500&auto=format&fit=crop&q=60",
},
];
</script>
<div class="flex min-h-[400px] items-center justify-center">
<AnimatedTestimonials {testimonials} autoplay interval={3000} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
testimonials * | Testimonial[] | - | Array of testimonials to display |
autoplay | boolean | false | Auto-advance testimonials |
interval | number | 5000 | Interval between auto-advances in ms |