带有parallex效果的幻灯片旋转木马滚动效果

<div class="carousel-container">
  <div class="carousel-item">
    <img src="slide1.jpg" alt="Slide 1">
    <div class="carousel-content">
      <h3>Slide 1</h3>
      <p>Content for Slide 1</p>
    </div>
  </div>
  <div class="carousel-item">
    <img src="slide2.jpg" alt="Slide 2">
    <div class="carousel-content">
      <h3>Slide 2</h3>
      <p>Content for Slide 2</p>
    </div>
  </div>
  <!-- 更多幻灯片项 -->
</div>

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

.carousel-item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

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

const carouselItems = document.querySelectorAll('.carousel-item');
let currentIndex = 0;

function showSlide(index) {
  carouselItems.forEach(item => item.classList.remove('active'));
  carouselItems[index].classList.add('active');
}

function rotateCarousel() {
  currentIndex = (currentIndex + 1) % carouselItems.length;
  showSlide(currentIndex);
}

setInterval(rotateCarousel, 3000);