
<style>
.carousel {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.carousel-track {
  display: flex;
}

.carousel-slide {
  flex: 0 0 25%; /* 电脑端一排展示4个图片 */
}

/* 适配手机端 */
@media (max-width: 767px) {
  .carousel-slide {
    flex: 0 0 50%; /* 手机端一排展示2个图片 */
  }
}

</style>
<div class="carousel">
  <div class="carousel-track">
    <div class="carousel-slide">
      <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="carousel-slide">
      <img src="image2.jpg" alt="Image 2">
    </div>
 <div class="carousel-slide">
      <img src="image2.jpg" alt="Image 2">
    </div>
 <div class="carousel-slide">
      <img src="image2.jpg" alt="Image 2">
    </div>
 <div class="carousel-slide">
      <img src="image2.jpg" alt="Image 2">
    </div>
 <div class="carousel-slide">
      <img src="image2.jpg" alt="Image 2">
    </div>
 <div class="carousel-slide">
      <img src="image2.jpg" alt="Image 2">
    </div>
 <div class="carousel-slide">
      <img src="image2.jpg" alt="Image 2">
    </div>
    <!-- 其他图片以此类推 -->
  </div>
</div>

<script>
  const track = document.querySelector('.carousel-track');
  const slides = Array.from(track.children);

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

  slides.forEach((slide, index) => {
    slide.addEventListener('touchstart', touchStart(index));
    slide.addEventListener('touchend', touchEnd);
    slide.addEventListener('touchmove', touchMove);
    slide.addEventListener('mousedown', touchStart(index));
    slide.addEventListener('mouseup', touchEnd);
    slide.addEventListener('mouseleave', touchEnd);
    slide.addEventListener('mousemove', touchMove);
  });

  function touchStart(index) {
    return function (event) {
      isDragging = true;
      startPosition = event.type.includes('mouse') ? event.pageX : event.touches[0].clientX;
      currentTranslate = prevTranslate;
    };
  }

  function touchMove(event) {
    if (!isDragging) return;
    const currentPosition = event.type.includes('mouse') ? event.pageX : event.touches[0].clientX;
    const distance = currentPosition - startPosition;
    const translate = currentTranslate + distance;

    track.style.transform = `translateX(${translate}px)`;
  }

  function touchEnd() {
    isDragging = false;
    const movedBy = currentTranslate - prevTranslate;

    if (movedBy < -100 && prevTranslate !== 0) {
      // Swipe right to left
      prevTranslate = currentTranslate;
      slideToNext();
    } else if (movedBy > 100 && prevTranslate !== -(slides.length - 1) * slides[0].offsetWidth) {
      // Swipe left to right
      prevTranslate = currentTranslate;
      slideToPrev();
    } else {
      track.style.transform = `translateX(${prevTranslate}px)`;
    }
  }

  function slideToNext() {
    if (prevTranslate === -(slides.length - 1) * slides[0].offsetWidth) return;
    track.style.transform = `translateX(${prevTranslate - slides[0].offsetWidth}px)`;
    prevTranslate -= slides[0].offsetWidth;
  }

  function slideToPrev() {
    if (prevTranslate === 0) return;
    track.style.transform = `translateX(${prevTranslate + slides[0].offsetWidth}px)`;
    prevTranslate += slides[0].offsetWidth;
  }
</script>


