Как сделать слайдер на js

<div class="slider">
  <img src="img1.jpg" />
  <img src="img2.jpg" />
  <img src="img3.jpg" />
  <button class="prev">Назад</button>
  <button class="next">Вперед</button>
</div>

.slider {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.slider img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slider img.active {
  opacity: 1;
}

.slider button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.slider .prev {
  left: 10px;
}

.slider .next {
  right: 10px;
}

const images = document.querySelectorAll('.slider img');
let currentIndex = 0;

function showImage(index) {
  images[currentIndex].classList.remove('active');
  images[index].classList.add('active');
  currentIndex = index;
}

document
  .querySelector('.slider.controlls')
  .addEventListener('click', function (event) {
    if (event.target.classList.contains('prev')) {
      let index = currentIndex - 1;
      if (index < 0) {
        index = images.length - 1;
      }
      showImage(index);
    } else if (event.target.classList.contains('next')) {
      let index = currentIndex + 1;
      if (index >= images.length) {
        index = 0;
      }
      showImage(index);
    }
  });

showImage(currentIndex);