"use client"; import { useState, useEffect, useRef } from "react"; import { ChevronLeft, ChevronRight } from "lucide-react"; import Link from "next/link"; type Slider2Props = { images?: string[]; titles?: string[]; }; const Slider2 = ({ images = [ "https://library.rapid-ui.com/images/blocks/slider2/1.png", "https://library.rapid-ui.com/images/blocks/slider2/2.png", "https://library.rapid-ui.com/images/blocks/slider2/3.png", "https://library.rapid-ui.com/images/blocks/slider2/4.png", ], titles = [ "Serene Wellness Retreata", "Holistic Healing", "Tranquil Escape", "Spa & Wellness", ], }: Slider2Props) => { // Create duplicated slides array with original slides in the middle // and duplicates at the beginning and end for infinite effect const [displayTitles, setDisplayTitles] = useState([ ...titles, ...titles, ...titles, ]); const [currentIndex, setCurrentIndex] = useState(titles.length); const [isTransitioning, setIsTransitioning] = useState(false); const [noTransition, setNoTransition] = useState(false); const sliderRef = useRef(null); const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 }); const [isLeftSide, setIsLeftSide] = useState(true); const [isHoveringLink, setIsHoveringLink] = useState(false); const [windowWidth, setWindowWidth] = useState(0); useEffect(() => { const handleResize = () => { setWindowWidth(window.innerWidth); }; // Set initial width handleResize(); // Add event listener window.addEventListener("resize", handleResize); // Cleanup return () => window.removeEventListener("resize", handleResize); }, []); // Get the actual index in the original titles array const actualIndex = currentIndex % titles.length; const [displayImages, setDisplayImages] = useState([ ...images, ...images, ...images, ]); useEffect(() => { if (noTransition) { const timer = setTimeout(() => { setNoTransition(false); }, 50); return () => clearTimeout(timer); } }, [noTransition]); // Handle mouse movement to update cursor position const handleMouseMove = (e: React.MouseEvent) => { setCursorPosition({ x: e.clientX, y: e.clientY }); setIsLeftSide(e.clientX < window.innerWidth / 2); }; // Handle the transition end to reset position for infinite loop const handleTransitionEnd = () => { setIsTransitioning(false); // Only reset if we're at an edge if (currentIndex >= displayTitles.length - titles.length) { // If we've gone too far forward, reset to the middle set setNoTransition(true); setCurrentIndex(titles.length + (currentIndex % titles.length)); } else if (currentIndex < titles.length) { // If we've gone too far backward, reset to the middle set setNoTransition(true); setCurrentIndex( displayTitles.length - titles.length * 2 + (currentIndex % titles.length) ); } }; const goToNext = () => { if (isTransitioning || noTransition) return; setIsTransitioning(true); setCurrentIndex((prev) => prev + 1); }; const goToPrev = () => { if (isTransitioning || noTransition) return; setIsTransitioning(true); setCurrentIndex((prev) => prev - 1); }; return (

{/* Cursor follower */}

{isLeftSide ? ( ) : ( )}

{/* Navigation click areas - moved to be the bottom layer but with higher z-index than images */}

{/* Navigation buttons for mobile */}

{/* Images */} {images.map((image, index) => (

))} {/* Titles container - ensure it has pointer-events-none to let clicks pass through */}

{displayTitles.map((title, index) => (

Lorem ipsum

{title}

))}

{/* Thumbnail Carousel */}

{displayImages.map((image, index) => (

))}

); }; export { Slider2 };

slider-2