Отображение разных изображений React ⇐ CSS

[Anonymous]

У меня есть следующие классы CSS, которые позволяют мне отображать на странице другое изображение через определенный период времени:

Код: Выделить всё

.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;
}

Пока у меня есть только этот CSS-код, который отображает одно изображение:

Код: Выделить всё

.defaultHero,
.roomsHero {
min-height: calc(100vh - 66px);
background: url("./images/defaultBcg.jpeg") center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
}

Мой компонент Hero выглядит так:

Код: Выделить всё

import React from 'react'

export default function Hero({children, hero}) {
return (

{children}

)
}

Hero.defaultProps = {
hero: "defaultHero"
};

И я называю это на своей домашней странице следующим образом:

Код: Выделить всё

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 (



our apartments



);
}

}

Как я могу ссылаться на класс image-fader на странице «О программе», чтобы возвращать много изображений.

Подробнее здесь: https://stackoverflow.com/questions/607 ... ages-react