drfeely.com/website/components/Carousel.tsx

53 lines
1.5 KiB
TypeScript
Raw Normal View History

2023-08-25 19:06:28 +00:00
"use client";
import Image from "next/image";
import chicagoPic from "@/public/homepage_carousel/chicago.jpg";
import indianapolisPic from "@/public/homepage_carousel/indianapolis.webp";
import naturePic from "@/public/homepage_carousel/nature.jpg";
import { useEffect, useState } from "react";
import { useTransition, animated } from "@react-spring/web";
interface Props {
className?: string;
}
const Carousel = ({ className }: Props) => {
const [backgroundIndex, setBackgroundIndex] = useState(0);
const backgroundImages = [
{ image: chicagoPic, desc: "Chicago Skyline" },
{ image: indianapolisPic, desc: "Indianapolis Skyline" },
{ image: naturePic, desc: "Two women hiking in the mountains" },
];
useEffect(() => {
const interval = setInterval(() => {
setBackgroundIndex(
(prevIndex) => (prevIndex + 1) % backgroundImages.length
);
}, 10000);
return () => clearInterval(interval);
}, []);
const transitions = useTransition(backgroundIndex, {
key: backgroundIndex,
from: { opacity: 0 },
enter: { opacity: 0.25 },
leave: { opacity: 0 },
config: { duration: 2500 },
exitBeforeEnter: true,
});
return transitions((style, item) => (
<animated.div style={style} className={className}>
<Image
src={backgroundImages[item].image}
alt={backgroundImages[item].desc}
className="h-full w-full object-cover"
/>
</animated.div>
));
};
export default Carousel;