diff options
Diffstat (limited to 'client/src/components/Home.tsx')
-rw-r--r-- | client/src/components/Home.tsx | 28 |
1 files changed, 11 insertions, 17 deletions
diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx index 79743a5..f735195 100644 --- a/client/src/components/Home.tsx +++ b/client/src/components/Home.tsx @@ -1,33 +1,30 @@ import React from 'react'; import { useEffect, useState } from 'react'; import './Carousel.css'; -import { BlurryLoadImg } from './BlurryLoadImg'; - -const images = [ - { small: '/small/engagement1.webp', full: '/full/engagement1.jpg' }, - { small: '/small/engagement2.webp', full: '/full/engagement2.jpg' }, - { small: '/small/engagement3.webp', full: '/full/engagement3.jpg' }, - { small: '/small/engagement4.webp', full: '/full/engagement4.jpg' }, - { small: '/small/engagement5.webp', full: '/full/engagement5.jpg' }, - { small: '/small/engagement6.webp', full: '/full/engagement6.jpg' }, -]; +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 [currentIndex, setIndex] = useState<number>(0); + const photos = [p0, p1, p2, p3, p4, p5]; useEffect(() => { const interval = setInterval(() => { setIndex((prevIndex) => - prevIndex === images.length - 1 ? 0 : prevIndex + 1 + prevIndex === photos.length - 1 ? 0 : prevIndex + 1 ); }, 3000); return () => clearInterval(interval); - }, [images.length]); + }, [photos.length]); return ( <div className="carousel-container"> <div className="carousel"> - {images.map((image, index) => ( + {photos.map((photo, index) => ( <div key={index} className={ @@ -36,10 +33,7 @@ function Home() { : 'carousel-slide' } > - <BlurryLoadImg - src={image.small} - data-large={`${image.full}`} - ></BlurryLoadImg> + <img src={photo}></img> </div> ))} </div> |