js左右滑动翻页

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

.slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: transform 0.3s ease;
}

let startX = 0;
let currentTranslate = 0;
let prevTranslate = 0;
let isDragging = false;

const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
const slideWidth = slider.offsetWidth;

slides.forEach((slide, index) => {
  slide.style.transform = `translateX(${index * 100}%)`;
});

slider.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
  isDragging = true;
});

slider.addEventListener('touchmove', (e) => {
  if (!isDragging) return;
  const currentX = e.touches[0].clientX;
  const diffX = currentX - startX;
  currentTranslate = prevTranslate + diffX;
  
  slides.forEach((slide, index) => {
    slide.style.transform = `translateX(${(index * 100 + currentTranslate / slideWidth) % slides.length}%)`;
  });
});

slider.addEventListener('touchend', () => {
  isDragging = false;
  const movedBy = currentTranslate - prevTranslate;
  if (movedBy < -100 && prevTranslate > -200) {
    // Swipe left
    prevTranslate -= slideWidth;
  } else if (movedBy > 100 && prevTranslate < 0) {
    // Swipe right
    prevTranslate += slideWidth;
  }
  
  slides.forEach((slide, index) => {
    slide.style.transform = `translateX(${(index * 100 + prevTranslate / slideWidth) % slides.length}%)`;
  });
});