如何淡出过渡旋转木马幻灯片？

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

.carousel-container {
  position: relative;
  width: 100%;
  height: 400px; /* 设置容器高度 */
  overflow: hidden;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* 初始状态为透明 */
  transition: opacity 1s ease; /* 设置过渡效果 */
}

.carousel-slide.active {
  opacity: 1; /* 激活状态为不透明 */
}

var slides = document.getElementsByClassName('carousel-slide');
var currentSlide = 0;

function showSlide(index) {
  // 移除之前激活的幻灯片
  for (var i = 0; i < slides.length; i++) {
    slides[i].classList.remove('active');
  }
  
  // 激活当前幻灯片
  slides[index].classList.add('active');
}

function nextSlide() {
  currentSlide++;
  if (currentSlide >= slides.length) {
    currentSlide = 0;
  }
  showSlide(currentSlide);
}

// 设置定时器自动切换幻灯片
setInterval(nextSlide, 5000);