35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
|
|
const images = ['/photos/5.jpg', '/photos/2.jpg', '/photos/3.jpg', '/photos/4.jpg', '/photos/1.jpg'];
|
|
|
|
const ImageCarousel: React.FC = () => {
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
|
|
}, 5000);
|
|
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="relative w-full h-[calc(100vw*9/16)] max-h-[720px] overflow-hidden mb-8 border-4 border-[#8C1D40] rounded-lg shadow-lg">
|
|
<AnimatePresence initial={false}>
|
|
<motion.img
|
|
key={currentIndex}
|
|
src={images[currentIndex]}
|
|
alt={`Slide ${currentIndex + 1}`}
|
|
className="absolute w-full h-full object-cover"
|
|
initial={{ x: '100%' }}
|
|
animate={{ x: 0 }}
|
|
exit={{ x: '-100%' }}
|
|
transition={{ duration: 0.5 }}
|
|
/>
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ImageCarousel;
|