js滑动图片轮播

<div class="carousel">
  <div class="carousel-inner">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

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

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

.carousel-inner img {
  width: 100px; 
}

const carouselInner = document.querySelector('.carousel-inner');
let currentIndex = 0;
const imageCount = carouselInner.children.length;
const slideWidth = carouselInner.children[0].width;

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

setInterval(() => {
  currentIndex = (currentIndex + 1) % imageCount;
  slideTo(currentIndex);
}, 2000);