In my CSS, I have defined classes that allow me to display different background images on a page at set intervals:
.image-fader {
width: 300px;
height: 300px;
}
.image-fader img {
position: absolute;
top: 0px;
left: 0px;
animation-name: imagefade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
}
@keyframes imagefade {
0% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
92% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.image-fader img:nth-of-type(1) {
animation-delay: 6s;
}
.image-fader img:nth-of-type(2) {
animation-delay: 4s;
}
.image-fader img:nth-of-type(3) {
animation-delay: 2s;
}
.image-fader img:nth-of-type(4) {
animation-delay: 0;
}
Currently, I only have CSS code for a single default image:
.defaultHero,
.roomsHero {
min-height: calc(100vh - 66px);
background: url("./images/defaultBcg.jpeg") center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
}
The structure of my Hero Component is as follows:
import React from 'react'
export default function Hero({children, hero}) {
return (
<header className={hero}>
{children}
</header>
)
}
Hero.defaultProps = {
hero: "defaultHero"
};
I am using the Hero Component in my Homepage like this:
import React from 'react'
import Hero from "../Components/Hero";
import Banner from "../Components/Banner";
import {Link} from 'react-router-dom';
export default function Home() {
return (
<Hero>
<Banner title="Affordable Apartments" subtitle="Family
Apartments Starting At €90 per night">
<Link to= "/rooms" className="btn-primary">
our apartments
</Link>
</Banner>
</Hero>
);
}
}
How can I incorporate the image-fader class into my Home page to display multiple background images sequentially? Is there a better way to achieve this functionality without relying on the image-fader class?