<div id="slideshow">
  <img src="https://picsum.photos/970/340" alt="Slide1" width="970" height="340">

  <img src="https://picsum.photos/960/330" alt="Slide2" width="960" height="330">

  <img src="https://picsum.photos/990/350" alt="Slide3" width="990" height="350">

  <img src="https://picsum.photos/1290/350" alt="Slide4" width="1290" height="350">

  <img src="https://picsum.photos/1990/350" alt="Slide5" width="1990" height="350">

</div>

#slideshow {
  max-width: 1280px;
  margin: auto;
  overflow: hidden;
  position: relative;
  height: 340px;
}
#slideshow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

// Forum question answer only
// Do not use
// https://www.sitepoint.com/community/t/stuck-in-a-slideshow-whats-wrong-in-my-code/365625

const slideshow = document.querySelector("#slideshow");
var slideshowImages = document.querySelectorAll("#slideshow img");
var lastImage = slideshowImages[slideshowImages.length - 1];

function runSlideshow() {
  let intervalId = setInterval(function () {
    console.log("Tona ut bilden", lastImage);
    //Alla bilderna

    //Sista bilden
    let opacity = 1;
    let fadeOutId = setInterval(function () {
      lastImage.style.opacity = opacity;
      if (opacity > 0) {
        opacity -= 0.01;
      } else {
        clearInterval(fadeOutId);
        opacity = 1;
        moveImage(lastImage);
      }
    }, 1000 / 60);
  }, 5000);
  return intervalId;
}
runSlideshow();

function moveImage(image) {
  image.remove();
  slideshow.prepend(image);
  image.style.opacity = 1;
  slideshowImages = document.querySelectorAll("#slideshow img");
  lastImage = slideshowImages[slideshowImages.length - 1];
}