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%;
  text-align: center;
}

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('touchmove', touchMove);
slider.addEventListener('touchend', touchEnd);

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;
  prevTranslate = currentTranslate;
  setSliderPosition();
}

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