title: Testimonial Slider
description: A lightweight testimonial slider with image rotation, text transitions, and optional auto‑rotation.
---

```vue
<template>
  <div class="relative h-[500px] w-full overflow-hidden rounded-lg border bg-background">
    <div class="mt-[64px] flex justify-center px-12">
      <TestimonialSlider :testimonials="testimonials" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { rand } from "@vueuse/core";

const testimonials = [
  {
    img: `https://randomuser.me/api/portraits/men/${getRandomNumber()}.jpg`,
    quote:
      "Inspira UI is sleeker than my star cruiser. Launch-ready in seconds. Zero crashes, zero gravity.",
    name: "Buzz Lightyear",
    role: "Intergalactic Interface Command",
  },
  {
    img: `https://randomuser.me/api/portraits/women/${getRandomNumber()}.jpg`,
    quote:
      "Clickin' around this thing feels like ridin' a horse with turbo boosters. Inspira’s got giddyup!",
    name: "Jessie",
    role: "Yeehaw Engagement & Barnyard UX",
  },
  {
    img: `https://randomuser.me/api/portraits/men/${getRandomNumber()}.jpg`,
    quote:
      "I’ve seen some clunky UIs in my day... but this one? Smoother than a tumbleweed on Tuesday.",
    name: "Woody",
    role: "Sheriff",
  },
  {
    img: `https://randomuser.me/api/portraits/men/${getRandomNumber()}.jpg`,
    quote:
      "I was terrified. Then I clicked. Nothing exploded. Inspira UI is a safe space. I’m thriving.",
    name: "Rex",
    role: "Senior Panic Tester, Dinosaur Usability Lab",
  },
];

function getRandomNumber() {
  return rand(1, 99);
}
</script>

```

## API

| Prop 名称      | 类型                                                                | 默认值 | 描述                                                                   |
| -------------- | ------------------------------------------------------------------- | ------ | ---------------------------------------------------------------------- |
| `testimonials` | `Array<{ img: string; quote: string; name: string; role: string }>` | `[]`   | Array of testimonial objects displayed by the slider.                  |
| `autoRotate`   | `boolean`                                                           | `true` | If `true`, the slider advances automatically every `duration` seconds. |
| `duration`     | `number`                                                            | `5`    | Interval in seconds between slides when auto‑rotation is enabled.      |

## 通过 CLI 安装

```vue
<InstallationCli component-id="spinning-text" />
```

## 手动安装

You can 复制并粘贴以下代码： to create this component:

::code-group

::CodeViewerTab{label="TestimonialSlider.vue" language="vue" componentName="TestimonialSlider" type="ui" id="testimonial-slider"}
::

::

## 功能特性

- **Avatar & Quote Pairing** — Images animate with a subtle rotation while quotes fade/slide in.
- **Auto‑Rotation** — Enable continuous cycling with the `autoRotate` prop.
- **Height Fix Utility** — Ensures the container height remains stable during transitions.
- **Manual Navigation** — Prev / next arrow buttons for user control.
- **CSS‑Driven Animations** — Uses Vue `<transition-group>` and custom CSS for smooth effects, no extra libraries required.
- **Fully Responsive** — Adjusts gracefully across screen sizes.