js中的轮播原理

<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">Item 1</div>
    <div class="carousel-item">Item 2</div>
    <div class="carousel-item">Item 3</div>
  </div>
</div>

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

.carousel-inner {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-item {
  min-width: 100%;
  text-align: center;
}

const carouselInner = document.querySelector('.carousel-inner');
let currentIndex = 0;
const items = document.querySelectorAll('.carousel-item');
const totalItems = items.length;
const slideDuration = 3000; // 3 seconds

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

function nextSlide() {
  currentIndex = (currentIndex + 1) % totalItems;
  slideTo(currentIndex);
}

setInterval(nextSlide, slideDuration);