This is an old revision of the document!

<div class="carousel">
  <img class="carousel-image" src="lib/exe/fetch.php?media=wiki:symbs.webp" alt="Caption 1">
  <img class="carousel-image" src="lib/exe/fetch.php?media=wiki:battle.webp" alt="Caption 2">
  <img class="carousel-image" src="lib/exe/fetch.php?media=wiki:rcc.webp" alt="Caption 3">
</div>
 
<style>
.carousel {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
 
.carousel-image {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s;
}
 
.carousel-image:nth-child(1) {
  opacity: 1;
  animation: fade 9s infinite;
}
 
.carousel-image:nth-child(2) {
  animation: fade 9s infinite 3s;
}
 
.carousel-image:nth-child(3) {
  animation: fade 9s infinite 6s;
}
 
@keyframes fade {
  0%, 100% { opacity: 0; }
  33.33% { opacity: 1; }
}
</style>