如何实现索引堆栈之间的幻灯片过渡？

<div class="stack-container">
  <div class="stack-slide">Slide 1</div>
  <div class="stack-slide">Slide 2</div>
  <div class="stack-slide">Slide 3</div>
</div>

.stack-container {
  position: relative;
}

.stack-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 1;
  transition: opacity 0.5s ease;
}

.stack-slide.hide {
  opacity: 0;
  z-index: 0;
}

var slides = document.getElementsByClassName('stack-slide');
var currentIndex = 0;

function showSlide(index) {
  slides[currentIndex].classList.add('hide');
  slides[index].classList.remove('hide');
  currentIndex = index;
}

// 点击下一个按钮时切换到下一个幻灯片
document.getElementById('next-button').addEventListener('click', function() {
  var nextIndex = currentIndex + 1;
  if (nextIndex >= slides.length) {
    nextIndex = 0;
  }
  showSlide(nextIndex);
});

// 定时器每隔3秒自动切换到下一个幻灯片
setInterval(function() {
  var nextIndex = currentIndex + 1;
  if (nextIndex >= slides.length) {
    nextIndex = 0;
  }
  showSlide(nextIndex);
}, 3000);