Displaying Different Images React

Question

I have the following classes in CSS that make me display a different image on a page after some period of time:

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

So far I only have this CSS code that displays a single 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;
}

My Hero Component looks like this:

import React from 'react'

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

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

And I'm calling it 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 &#8364;90 per night">
        <Link to= "/rooms" className="btn-primary">
            our apartments
        </Link>
        </Banner>
        </Hero>
    );
}

}

How can I reference the image-fader class in my About page in order to return many images.

Can you show what Hero component looks like?

Kox
– Kox

2020-03-20 09:40:50 +00:00
Commented Mar 20, 2020 at 9:40 — Kox
– Kox, Commented Mar 20, 2020 at 9:40
I have edited how the Hero Component looks like

Prog101
– Prog101

2020-03-21 01:33:12 +00:00
Commented Mar 21, 2020 at 1:33 — Prog101
– Prog101, Commented Mar 21, 2020 at 1:33

Konstantin Modin · Accepted Answer · 2020-03-20 10:21:33Z

1

well with javascript you can do it like this:

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;

answered Mar 20, 2020 at 10:21

Konstantin Modin

1,3439 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Displaying Different Images React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related