怎样才能让这个旋转木马与JS和CSS协同工作？

<div id="carousel-container">
  <div class="carousel-item">Item 1</div>
  <div class="carousel-item">Item 2</div>
  <div class="carousel-item">Item 3</div>
</div>

#carousel-container {
  width: 400px;
  height: 200px;
  background-color: #f0f0f0;
  position: relative;
  overflow: hidden;
}

.carousel-item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.carousel-item.active {
  display: block;
}

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

function showNextItem() {
  carouselItems[currentIndex].classList.remove('active');
  currentIndex = (currentIndex + 1) % carouselItems.length;
  carouselItems[currentIndex].classList.add('active');
}

setInterval(showNextItem, 3000);