# Rotating Testimonial Slider

> This code implements a visually appealing and functional testimonial slider component. It addresses the need to showcase multiple testimonials in a dynamic and engaging way, improving user experience and content presentation.  The component fetches an array of testimonials, each containing an image, quote, name, and role.  It uses a state variable (`active`) to track the currently displayed testimonial.  The slider cycles through testimonials automatically at a set interval (configurable via `autorotateTiming`). Users can manually switch between testimonials by clicking the buttons displayed below. The smooth transitions are handled by the `Transition` component from the `@headlessui/react` library.  The `useEffect` hook manages the autorotation and ensures the parent container dynamically adjusts height to accommodate the content. The component utilizes the `Image` component from Next.js for efficient image loading and rendering.  The styling leverages a CSS-in-JS approach, although it could be swapped for a CSS framework.  It uses a `ref` to access the DOM element and adjust the height dynamically.  This component is ideal for websites and applications needing to showcase client testimonials, reviews, or similar content. For instance, it could be used on a landing page to build trust, on a product page to highlight user feedback, or within a case study section to present client success stories.  The component features smooth animations using custom easing functions.  The design is clean and modern, with a focus on accessibility and user experience.  Users can choose to disable the automatic rotation for a more controlled experience.

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- npm dependencies: next, @headlessui/react
- Live preview: https://21st.dev/@uniquesonu/components/rotating-testimonial-slider

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/rotating-testimonial-slider?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt