create an image slideshow in javascript

index.tsx
// HTML structure:
<div id="slideshow">
  <img class="slides" src="image1.jpg" />
  <img class="slides" src="image2.jpg" />
  <img class="slides" src="image3.jpg" />
</div>

// CSS for slideshow:
<style>
#slideshow {
  position: relative;
  max-width: 100%;
  height: 400px;
  margin: auto;
}

.slides {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
}

</style>

// JavaScript for slideshow:
<script>
let currentSlide = 0;
const slides = document.getElementsByClassName("slides");

function showSlide(n) {
  slides[currentSlide].style.display = 'none';
  
  currentSlide = (n + slides.length) % slides.length;
  
  slides[currentSlide].style.display = 'block';
}

function nextSlide() {
  showSlide(currentSlide + 1);
}

function prevSlide() {
  showSlide(currentSlide - 1);
}

showSlide(currentSlide);
</script>
837 chars
49 lines