JavaScript에서 이미지 캐러셀 기능을 구현하는 방법은 무엇입니까?

<div id="carousel" class="carousel">
  <img src="image1.jpg" alt="Image 1" class="carousel-image">
  <img src="image2.jpg" alt="Image 2" class="carousel-image">
  <img src="image3.jpg" alt="Image 3" class="carousel-image">
  
  <button id="prevBtn" class="carousel-button carousel-button-prev">上一张</button>
  <button id="nextBtn" class="carousel-button carousel-button-next">下一张</button>
</div>

.carousel {
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-image {
  width: 100%;
  height: auto;
}

.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.carousel-button-prev {
  left: 10px;
}

.carousel-button-next {
  right: 10px;
}

var currentIndex = 0; // 当前图片的索引
var images = document.getElementsByClassName("carousel-image"); // 图片元素集合

function showImage(index) {
  // 隐藏当前图片
  images[currentIndex].style.display = "none";
  // 显示指定索引的图片
  images[index].style.display = "block";
  // 更新当前索引
  currentIndex = index;
}

function prevImage() {
  // 判断是否是第一张图片
  if (currentIndex === 0) {
    showImage(images.length - 1); // 切换到最后一张图片
  } else {
    showImage(currentIndex - 1); // 切换到上一张图片
  }
}

function nextImage() {
  // 判断是否是最后一张图片
  if (currentIndex === images.length - 1) {
    showImage(0); // 切换到第一张图片
  } else {
    showImage(currentIndex + 1); // 切换到下一张图片
  }
}

document.getElementById("prevBtn").addEventListener("click", prevImage);
document.getElementById("nextBtn").addEventListener("click", nextImage);