Testimonial Slider

A lightweight testimonial slider with image rotation, text transitions, and optional auto‑rotation.

API

Prop Name	Type	Default	Description
`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.

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://inspira-ui.com/r/spinning-text.json"

You can copy and paste the following code to create this component:

TestimonialSlider.vue

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.

On This Page