如何创建多个镜像carousel？

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

.carousel-container {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
}

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

.carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

const carousel = document.querySelector('.carousel');
let currentIndex = 0;

function showImage(index) {
  carousel.style.transform = `translateX(-${index * 100}%)`;
}

function nextImage() {
  currentIndex = (currentIndex + 1) % carousel.children.length;
  showImage(currentIndex);
}

function previousImage() {
  currentIndex = (currentIndex - 1 + carousel.children.length) % carousel.children.length;
  showImage(currentIndex);
}

setInterval(nextImage, 3000); // 自动切换图片，每3秒切换一次