JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<ul class="gallery">
  <li aria-current="step">
    <figure>
      <figcaption>Ein Glas Kölsch</figcaption>
      <div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/Glas_malz_muehlenkoelsch.jpg/401px-Glas_malz_muehlenkoelsch.jpg" alt="Glas mit Kölsch"></div>
    </figure>
  </li>
  <li>
    <figure>
      <figcaption>Deutzer Brücke mit Hauptbahnhof und Dom</figcaption>
      <div>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Stadtbild_K%C3%B6ln_%2850MP%29.jpg/1024px-Stadtbild_K%C3%B6ln_%2850MP%29.jpg" alt="Stadtpanorama"></div>
    </figure>
  </li>
  <li>
    <figure>
      <figcaption>Einmol im Johr kütt d'r Rhing us em Bett</figcaption>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Bundesarchiv_B_422_Bild-0086%2C_K%C3%B6ln%2C_Rheinufer%2C_Hochwasser.jpg/573px-Bundesarchiv_B_422_Bild-0086%2C_K%C3%B6ln%2C_Rheinufer%2C_Hochwasser.jpg">
    </figure>
  </li>
</ul>
<footer>Alle Bilder entstammen dem Wikipedia-Artikel über die Stadt Köln</footer>

CSS

ul {
  list-style: none;
  padding: 0;
  position: relative;
  height: 90vh;
}

ul li {
  position: absolute;
  width: 100%;
  height: 100%;
}
ul li figure {
  margin: 0; padding: 0;
  opacity: 0;
  transition: opacity 1.5s;
  height: 100%;
  display: grid;
  grid-template: "cap" auto "img" 1fr / 1fr;
  justify-items: center;
}
ul li[aria-current] figure {
  opacity: 1;
}
figure figcaption {
  grid-area: cap;
}
figure div {
  grid-area: img;
  height: 100%;
  outline: 1px solid blue;
}
figure img {
  max-width: 100%;
  height: 100%;
  vertical-align: bottom;
}

footer {
  text-align: center;
  margin-top: 0.5em;
}

JavaScript

$(function() {
   //setInterval(changePicture, 3000);

   function changePicture() {
      let $currentPic = $(".gallery li[aria-current]"),
          $nextPic = $currentPic.next();
      if ($nextPic.length == 0)
         $nextPic = $(".gallery li:first-of-type")
      $currentPic.removeAttr("aria-current");
      $nextPic.attr("aria-current", "step");
   }
});