"use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { ChevronLeft, ChevronRight, Pause, Play } from "lucide-react"; const FramerCarousel = ({ autoplay = false, slides, interval = 5000 }) => { const [currentIndex, setCurrentIndex] = useState(0); const [isPaused, setIsPaused] = useState(false); const [touchStart, setTouchStart] = useState(0); const [touchEnd, setTouchEnd] = useState(0); useEffect(() => { if (!autoplay || isPaused) return; const timer = setInterval(() => paginate(1), interval); return () => clearInterval(timer); }, [currentIndex, isPaused, interval]); const paginate = (direction) => { setCurrentIndex( (prev) => (prev + direction + slides.length) % slides.length ); }; const handleTouchStart = (e) => { setTouchStart(e.touches[0].clientX); }; const handleTouchMove = (e) => { setTouchEnd(e.touches[0].clientX); }; const handleTouchEnd = () => { if (!touchStart || !touchEnd) return; const distance = touchStart - touchEnd; const isLeftSwipe = distance > 50; const isRightSwipe = distance < -50; if (isLeftSwipe) { paginate(1); } else if (isRightSwipe) { paginate(-1); } setTouchStart(0); setTouchEnd(0); }; return (

{slides[currentIndex].title}

{slides[currentIndex].description}

{/* Navigation Controls */}

paginate(-1)} > paginate(1)} >

{/* Progress Indicators */}

{autoplay && ( setIsPaused(!isPaused)} className="w-8 h-8 flex items-center justify-center rounded-full bg-white/10 text-white backdrop-blur-md hover:bg-white/20 transition-colors" > {isPaused ? ( ) : ( )} )} {slides.map((_, index) => ( ))}

); }; export default FramerCarousel;

Carousel Slider

Mountains