Slideshow example

HTML

<div id="app"></div>

CSS

.slideshow {
  position: relative;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 600 italic 10vh/1 "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
  color: rgba(255, 255, 255, 0.5);
}

React

const sleep = async (delay) =>
  new Promise((resolve) => setTimeout(resolve, delay));

const Slideshow = ({ slides = [] }) => {
  const [activeSlide, setActiveSlide] = React.useState(0);
  
  return (
    <div className="slideshow">
      {slides.map((color, position) => (
        <div className="slide" style={{ backgroundColor: color }}>
          {color}
        </div>
      ))}
    </div>
  );
};

ReactDOM.render(
  <Slideshow
    slides={["#FF9AA2", "#FFB7B2", "#FFDAC1", "#E2F0CB", "#B5EAD7", "#C7CEEA"]}
  />,
  document.querySelector("#app")
);