import { useEffect, useRef, useState } from 'react'; export default function ImageCarousel({ slides = [], autoPlay = true, interval = 4000, className = '', ...props }) { const [index, setIndex] = useState(0); const [paused, setPaused] = useState(false); const startX = useRef(0); const total = slides.length || 1; const next = () => setIndex((i) => (i + 1) % total); const prev = () => setIndex((i) => (i - 1 + total) % total); // autoplay useEffect(() => { if (!autoPlay || paused) return; const id = setInterval(next, interval); return () => clearInterval(id); }, [paused, autoPlay, interval]); // swipe handlers const onTouchStart = (e) => { startX.current = e.touches[0].clientX; }; const onTouchEnd = (e) => { const diff = startX.current - e.changedTouches[0].clientX; if (Math.abs(diff) > 50) diff > 0 ? next() : prev(); }; if (!slides.length) { slides = [{ image: 'https://via.placeholder.com/800x400', alt: 'placeholder' }]; } return (

setPaused(true)} onMouseLeave={() => setPaused(false)} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} {...props} > {/* Slides */}

{slides.map((slide, i) => ( {slide.alt}

))}

{/* Side fade overlays */}

{/* Arrows */} {/* Dots */}

{slides.map((_, i) => (

); }

Components

Image Carousel

Installation

Tailwind Setup