如何创建一个像这样的无限全屏滑块？

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

.slider-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.slider {
  display: flex;
  width: 300%;
  height: 100vh;
}

.slide {
  width: 33.33%;
  height: 100vh;
}

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

function handleSlide(event) {
  const direction = event.deltaY > 0 ? 1 : -1;
  currentIndex += direction;

  if (currentIndex < 0) {
    currentIndex = 0;
  } else if (currentIndex > 2) {
    currentIndex = 2;
  }

  slider.style.transform = `translateX(-${currentIndex * 33.33}%)`;
}

window.addEventListener('wheel', handleSlide);