diff options
Diffstat (limited to 'client/src/components/Home.tsx')
-rw-r--r-- | client/src/components/Home.tsx | 69 |
1 files changed, 29 insertions, 40 deletions
diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx index 558c104..bfa3fa8 100644 --- a/client/src/components/Home.tsx +++ b/client/src/components/Home.tsx @@ -1,51 +1,40 @@ import React from 'react'; -import { useEffect, useRef, useState } from 'react'; +import { useEffect, useState } from 'react'; +import './Carousel.css'; +import p0 from '/EngagmentSession_06.23.2024-131.jpg'; +import p1 from '/EngagmentSession_06.23.2024-161.jpg'; +import p2 from '/EngagmentSession_06.23.2024-164.jpg'; +import p3 from '/EngagmentSession_06.23.2024-259.jpg'; +import p4 from '/EngagmentSession_06.23.2024-267.jpg'; +import p5 from '/EngagmentSession_06.23.2024-284.jpg'; function Home() { - const [index, setIndex] = useState(0); - const colors = ['#FF0000', '#00FF00', '#0000FF']; - const timeout = useRef(0); + const [currentIndex, setIndex] = useState(0); + const photos = [p0, p1, p2, p3, p4, p5]; useEffect(() => { - resetTimeout(); - timeout.current = window.setTimeout( - () => - setIndex((prevIndex) => - prevIndex === colors.length - 1 ? 0 : prevIndex + 1 - ), - 2500 - ); - - return () => { - resetTimeout(); - }; - }, [index]); - - const resetTimeout = () => { - if (timeout.current) { - clearTimeout(timeout.current); - } - }; + const interval = setInterval(() => { + setIndex((prevIndex) => + prevIndex === photos.length - 1 ? 0 : prevIndex + 1 + ); + }, 5000); + return () => clearInterval(interval); + }, [photos.length]); return ( - <div style={{ margin: 'auto', overflow: 'hidden' }}> - <div - style={{ - whiteSpace: 'nowrap', - transform: `translateX(${-index * 100}%)`, - transition: 'ease 1000ms', - }} - > - {colors.map((backgroundColor, colorIndex) => ( + <div className="carousel-container"> + <div className="carousel"> + {photos.map((photo, index) => ( <div - key={colorIndex} - style={{ - display: 'inline-block', - backgroundColor, - height: '80vh', - width: '100%', - }} - /> + key={index} + className={ + index === currentIndex + ? 'carousel-slide active-slide' + : 'carousel-slide' + } + > + <img src={photo}></img> + </div> ))} </div> </div> |