<div id="slideshow">
  <div class="slide">
    <img src="https://picsum.photos/970/340" alt="Slide1" width="970" height="340">
    <p class="caption">Caption 1</p>
  </div>
  <div class="slide">
    <img src="https://picsum.photos/960/330" alt="Slide2" width="960" height="330">
    <p class="caption">Caption 2</p>
  </div>
  <div class="slide">
    <img src="https://picsum.photos/990/350" alt="Slide3" width="990" height="350">
    <p class="caption">Caption 3</p>
  </div>
  <div class="slide">
    <img src="https://picsum.photos/1290/350" alt="Slide4" width="1290" height="350">
    <p class="caption">Caption 4</p>
  </div>
  <div class="slide">
    <img src="https://picsum.photos/1990/350" alt="Slide5" width="1990" height="350">
    <p class="caption">Caption 5</p>
  </div>
</div>

html,
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

#slideshow {
  max-width: 1280px;
  margin: 1rem auto;
  overflow: hidden;
  position: relative;
  height: 340px;
  border: 5px solid red;
}
.slide {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 2s ease;
}
.slide,
.slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.slide {
  opacity: 0;
}
.slide img {
  object-fit: cover;
}
.slide.active {
  opacity: 0;
  z-index: 1;
}
.slide.next {
  opacity: 1;
  z-index: 0;
  transition: opacity 0s;
}
p.caption {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.7);
}

// fade is handled in the css
(function makeCarousel(d) {
  "use strict";

  const slideshowImages = document.querySelectorAll("#slideshow .slide");
  const time = 5000; //delay
  var numImages = slideshowImages.length - 1;
  var activeImage = numImages;
  var nextImage = numImages - 1;
  var oldActive = activeImage;

  function fadeImage() {
    if (nextImage < 0) {
      nextImage = numImages;
    }
    if (activeImage < 0) {
      activeImage = numImages;
    }
    slideshowImages[oldActive].classList.remove("active");
    slideshowImages[activeImage].classList.add("active");
    slideshowImages[activeImage].classList.remove("next");
    slideshowImages[nextImage].classList.add("next");
    slideshowImages[nextImage].classList.remove("active");

    oldActive = activeImage;
    activeImage -= 1;
    nextImage -= 1;

    setTimeout(fadeImage, time);
  }
  slideshowImages[numImages].classList.add("next");
  setTimeout(fadeImage, time);
})(document);