Реагирование на различные изображения

Question

У меня есть следующие классы в 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;
}

Компонент «Мой герой» выглядит следующим образом:

import React from 'react'

export default function Hero({children, hero}) {
return (
    <header className={hero}>
        {children}
    </header>
)
}

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 (
        <Hero>
            <Banner title="Affordable Apartments" subtitle="Family
        Apartments Starting At &#8364;90 per night">
        <Link to= "/rooms" className="btn-primary">
            our apartments
        </Link>
        </Banner>
        </Hero>
    );
}

}

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

Answer 1

хорошо с javascript вы можете сделать это так:

import React from "react";
import image1 from "./img/1.png";
import image2 from "./img/2.png";
import image3 from "./img/3.png";

const imageArray = [image1, image2, image3];

const App = () => {
  const [current, setCurrent] = React.useState(0);

  React.useEffect(() => {
    const timerId = setInterval(() => {
        setCurrent(cur => (cur < imageArray.length - 1 ? cur + 1 : 0));
    }, 500);
    return () => {
        clearInterval(timerId);
    };
  }, []);

  return (
    <div>
        <img src={imageArray[current]} alt="img" />
        {current}
    </div>
  );
};
export default App;