Skip to main content

​
Overview

Testimonial Slider is a lightweight component for displaying customer testimonials in a rotating carousel format. It features smooth image rotation, text transitions, and optional auto-rotation functionality.

​
Usage

<template>
  <TestimonialSlider
    :testimonials="testimonials"
    :autoRotate="true"
    :duration="5"
  />
</template>

<script setup>
const testimonials = [
  {
    img: "/testimonials/user1.jpg",
    quote: "This service has completely transformed how we work. Highly recommended!",
    name: "Alex Thompson",
    role: "Marketing Director"
  },
  {
    img: "/testimonials/user2.jpg",
    quote: "Outstanding support and incredible results. Best decision we made this year.",
    name: "Maria Garcia",
    role: "Founder & CEO"
  },
  {
    img: "/testimonials/user3.jpg",
    quote: "Professional, reliable, and always delivering beyond expectations.",
    name: "David Kim",
    role: "Operations Manager"
  }
]
</script>

​
API Reference

​
Props

Prop NameTypeDefaultDescription
testimonialsArray<{ img: string; quote: string; name: string; role: string }>[]Array of testimonial objects displayed by the slider.
autoRotatebooleantrueIf true, the slider advances automatically every duration seconds.
durationnumber5Interval in seconds between slides when auto-rotation is enabled.

​
Testimonial Object

Each testimonial object in the array should have:
PropertyTypeDescription
imgstringURL or path to the testimonial author’s image
quotestringThe testimonial text
namestringName of the testimonial author
rolestringRole or designation of the author

​
Features

  • Lightweight: Minimal footprint with smooth performance
  • Image rotation: Smooth transitions between testimonial images
  • Auto-rotation: Optional automatic cycling through testimonials
  • Customizable timing: Control the duration between slides
  • Responsive design: Works seamlessly across all device sizes

Build docs developers (and LLMs) love

Get started for freeTalk to us