如何让我的自动图像传送带循环回到第一张图像而不暴露第二张

<div class="carousel">
  <img src="image1.jpg" alt="Image 1" class="carousel-image">
  <img src="image2.jpg" alt="Image 2" class="carousel-image hidden">
</div>

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

.carousel-image {
  position: absolute;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.carousel-image.active {
  opacity: 1;
}

.hidden {
  display: none;
}

const images = document.querySelectorAll('.carousel-image');
let currentIndex = 0;

function showImage(index) {
  images.forEach((img, i) => {
    if (i === index) {
      img.classList.add('active');
    } else {
      img.classList.remove('active');
    }
  });
}

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

setInterval(nextImage, 3000); // 每3秒切换一次图像