在一个页面上使用多个快速幻灯片

<div class="slideshow-container">
  <ul class="slides">
    <li class="slide">Slide 1</li>
    <li class="slide">Slide 2</li>
    <li class="slide">Slide 3</li>
  </ul>
</div>

.slideshow-container {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.slides {
  width: 300%;
  height: 100%;
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  width: 33.33%;
  height: 100%;
  flex-shrink: 0;
}

const slidesContainer = document.querySelector('.slides');
const slides = Array.from(document.querySelectorAll('.slide'));
let currentIndex = 0;

function goToSlide(index) {
  slidesContainer.style.transform = `translateX(-${index * 100}%)`;
  currentIndex = index;
}

function nextSlide() {
  if (currentIndex === slides.length - 1) {
    goToSlide(0);
  } else {
    goToSlide(currentIndex + 1);
  }
}

function prevSlide() {
  if (currentIndex === 0) {
    goToSlide(slides.length - 1);
  } else {
    goToSlide(currentIndex - 1);
  }
}

// 监听滑动或点击事件，调用相应的函数