"use client"; import React, { useState, useEffect, useRef } from "react"; import { motion, PanInfo } from "framer-motion"; const SparklesIcon = ({ className }) => ; const ChevronLeftIcon = ({ className }) => ; const ChevronRightIcon = ({ className }) => ; const Badge = ({ children, className }) =>
{children}
; const cardData = [{ id: 1, imageUrl: "https://i.pinimg.com/736x/d6/8a/12/d68a121e960094f99ad8acd37505fb7d.jpg", title: "Crimson Forest" }, { id: 2, imageUrl: "https://i.pinimg.com/736x/21/16/f7/2116f71f9d51d875e44d809f074ff079.jpg", title: "Misty Mountains" }, { id: 3, imageUrl: "https://i.pinimg.com/1200x/fe/c2/0d/fec20d2958059b8463bffb138d4eaac6.jpg", title: "Floating Islands" }, { id: 4, imageUrl: "https://i.pinimg.com/736x/84/dc/62/84dc62de850a34a9d420c97f3a2d58f4.jpg", title: "Crystal Cave" }, { id: 5, imageUrl: "https://i.pinimg.com/1200x/be/c3/7e/bec37e2c43e703f922f887db2578ce2e.jpg", title: "Sunset Peaks" }, { id: 6, imageUrl: "https://i.pinimg.com/736x/47/dd/47/47dd47b0d66c2fa641e03e370bcb5433.jpg", title: "Night Sky" }, { id: 7, imageUrl: "https://i.pinimg.com/736x/05/01/bc/0501bcd327d9df915e83154bbf9456e3.jpg", title: "Ancient Ruins" }, { id: 8, imageUrl: "https://i.pinimg.com/736x/c1/46/be/c146bebffca026d2c4fa76cc85aac917.jpg", title: "Magical Tree" }, { id: 9, imageUrl: "https://i.pinimg.com/736x/91/7a/51/917a51df0d444def3cade8d626305a67.jpg", title: "Celestial Waters" }]; export default function Carousel() { const [activeIndex, setActiveIndex] = useState(Math.floor(cardData.length / 2)); const [isPaused, setIsPaused] = useState(false); const autoplayIntervalRef = useRef(null); const autoplayDelay = 3000; const goToNext = () => { setActiveIndex(prev => (prev + 1) % cardData.length); }; useEffect(() => { if (!isPaused) { autoplayIntervalRef.current = setInterval(goToNext, autoplayDelay); } return () => { if (autoplayIntervalRef.current) { clearInterval(autoplayIntervalRef.current); } }; }, [isPaused, activeIndex]); const changeSlide = newIndex => { const newSafeIndex = (newIndex + cardData.length) % cardData.length; setActiveIndex(newSafeIndex); if (autoplayIntervalRef.current) { clearInterval(autoplayIntervalRef.current); } if (!isPaused) { autoplayIntervalRef.current = setInterval(goToNext, autoplayDelay); } }; const onDragEnd = (event, info) => { const dragThreshold = 75; const dragOffset = info.offset.x; if (dragOffset > dragThreshold) { changeSlide(activeIndex - 1); } else if (dragOffset < -dragThreshold) { changeSlide(activeIndex + 1); } }; return
setIsPaused(true)} onMouseLeave={() => setIsPaused(false)}>
Enhanced Carousel
{cardData.map((card, index) => )}
{cardData.map((_, index) =>
; } function Card({ card, index, activeIndex, totalCards }) { let offset = index - activeIndex; if (offset > totalCards / 2) { offset -= totalCards; } else if (offset < -totalCards / 2) { offset += totalCards; } const isVisible = Math.abs(offset) <= 1; const animate = { x: `${offset * 50}%`, scale: offset === 0 ? 1 : 0.8, zIndex: totalCards - Math.abs(offset), opacity: isVisible ? 1 : 0, transition: { type: "spring", stiffness: 260, damping: 30 } }; return
{card.title} { const target = e.target; target.onerror = null; target.src = "https://placehold.co/400x600/1e1e1e/ffffff?text=Image+Missing"; }} />

{card.title}

; }