[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Carousel from "@/components/Carousel" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/Carousel.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useRef, useEffect } from "react" const Carousel = () => { const [activeIndex, setActiveIndex] = useState(0) const carouselRef = useRef(null) const items = [1, 2, 3, 4, 5] // Placeholder numbers useEffect(() => { const handleScroll = () => { if (carouselRef.current) { const index = Math.round(carouselRef.current.scrollLeft / carouselRef.current.offsetWidth) setActiveIndex(index) } } carouselRef.current?.addEventListener("scroll", handleScroll) return () => carouselRef.current?.removeEventListener("scroll", handleScroll) }, []) return (

{items.map((item, index) => (

{item}

))}

{items.map((_, index) => (

))}

) } export default Carousel [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; /* Hide scrollbar for Chrome, Safari and Opera */ .snap-x::-webkit-scrollbar { display: none; } /* Hide scrollbar for Chrome, Safari and Opera */ .scrollbar-hide::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .scrollbar-hide { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }

About

About