"use client" import { useEffect, useRef, useState } from "react" import Image from "next/image" import { Transition } from "@headlessui/react" interface Testimonial { img: string quote: string name: string role: string } export default function FancyTestimonialsSlider({ testimonials, autorotateTiming = 7000, }: { testimonials: Testimonial[] autorotateTiming?: number }) { const testimonialsRef = useRef(null) const [active, setActive] = useState(0) const [autorotate, setAutorotate] = useState(true) useEffect(() => { if (!autorotate) return const interval = setInterval(() => { setActive(active + 1 === testimonials.length ? 0 : (active) => active + 1) }, autorotateTiming) return () => clearInterval(interval) }, [active, autorotate]) const heightFix = () => { if (testimonialsRef.current && testimonialsRef.current.parentElement) testimonialsRef.current.parentElement.style.height = `${testimonialsRef.current.clientHeight}px` } useEffect(() => { heightFix() }, []) return (

{/* Testimonial image */}

{testimonials.map((testimonial, index) => ( heightFix()} > {testimonial.name}

))}

{/* Text */}

{testimonials.map((testimonial, index) => ( heightFix()} >

{testimonial.quote}

))}

{/* Buttons */}

{testimonials.map((testimonial, index) => ( ))}

) }

testimonal-slider

Instalação

Dependências