js实现页面左右滑动

<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%;
  overflow: hidden;
}

.slider {
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.slide {
  min-width: 100%;
  box-sizing: border-box;
}

document.addEventListener('DOMContentLoaded', function() {
  const slider = document.querySelector('.slider');
  let startX = 0;
  let currentTranslate = 0;
  let prevTranslate = 0;
  let animationID = 0;
  let currentIndex = 0;

  slider.addEventListener('touchstart', touchStart);
  slider.addEventListener('touchend', touchEnd);
  slider.addEventListener('touchmove', touchMove);

  function touchStart(event) {
    startX = event.touches[0].clientX;
    cancelAnimationFrame(animationID);
  }

  function touchMove(event) {
    const currentX = event.touches[0].clientX;
    currentTranslate = prevTranslate + currentX - startX;
  }

  function touchEnd() {
    const movedBy = currentTranslate - prevTranslate;
    if (movedBy < -100 && currentIndex < 2) currentIndex += 1;
    if (movedBy > 100 && currentIndex > 0) currentIndex -= 1;
    setSliderPosition();
  }

  function setSliderPosition() {
    currentTranslate = currentIndex * -window.innerWidth;
    prevTranslate = currentTranslate;
    slider.style.transform = `translateX(${currentTranslate}px)`;
    animationID = requestAnimationFrame(setSliderPosition);
  }
});