<div class="slideshow-container" style="width:100px;">
  <div class="slideshow-image fade">
    <img src="/img/cat_640.jpg" alt="Image 1">
  </div>
  <div class="slideshow-image fade">
    <img src="/img/puppy_640.jpg" alt="Image 2">
  </div>
</div>

<style type="text/css">
.slideshow-container {
  position: relative;
  width: 100%;
  height: 500px;
}

.slideshow-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slideshow-image.fade {
  opacity: 1;
}
</style>

<script>
const slides = document.querySelectorAll('.slideshow-image');
let currentSlide = 0;

function showSlide() {
  slides[currentSlide].classList.remove('fade');
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].classList.add('fade');
}

setInterval(showSlide, 3000);
</script>