给定包含幻灯片的滑块div，如何在单击时滚动到下一张幻灯片？

<div class="slider">
  <div class="slides">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>
</div>

.slider {
  width: 400px;
  height: 200px;
  overflow: hidden;
}

.slides {
  display: flex;
  width: 100%;
  height: 100%;
}

.slide {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
let currentIndex = 0;

slider.addEventListener('click', () => {
  slides[currentIndex].style.display = 'none';
  currentIndex = (currentIndex + 1) % slides.length;
  slides[currentIndex].style.display = 'flex';
  slider.style.transform = `translateX(-${currentIndex * 100}%)`;
});