diff --git a/src/components/vertical-carousel/index.tsx b/src/components/vertical-carousel/index.tsx index a6e4e32..e865f45 100644 --- a/src/components/vertical-carousel/index.tsx +++ b/src/components/vertical-carousel/index.tsx @@ -1,7 +1,6 @@ - 'use client'; -import { motion, AnimatePresence, stagger } from 'framer-motion'; +import { motion, AnimatePresence } from 'framer-motion'; import { useEffect, useState, Children } from 'react'; const VerticalCarousel = ({ children, className }: @@ -30,27 +29,30 @@ const VerticalCarousel = ({ children, className }: useEffect(() => { const interval = setInterval(() => { - const nextIndex = (index + 1) % content.length; - setIndex(nextIndex); + setIndex((prevIndex) => (prevIndex + 1) % content.length); }, 3000); return () => clearInterval(interval); - }, [content.length, index]); + }, [content.length]); return ( <div className={className}> - <motion.div className="relative h-[3rem] overflow-hidden"> - <AnimatePresence> - <motion.div key={index} className="absolute w-full" - variants={contentAnimation} - initial="initial" - animate="animate" - exit="exit"> - {content[index]} - </motion.div> + <div className="relative h-[3rem] overflow-hidden"> + <AnimatePresence initial={false}> + {content.map((child, i) => ( + i === index && ( + <motion.div key={i} className="absolute w-full" + variants={contentAnimation} + initial="initial" + animate="animate" + exit="exit"> + {child} + </motion.div> + ) + ))} </AnimatePresence> - </motion.div> + </div> </div> ); } -export default VerticalCarousel; \ No newline at end of file +export default VerticalCarousel;