如何在四个图像之间添加旋转木马？

<div class="carousel">
  <img src="image1.jpg" class="carousel-item">
  <img src="image2.jpg" class="carousel-item">
  <img src="image3.jpg" class="carousel-item">
  <img src="image4.jpg" class="carousel-item">
</div>

.carousel {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

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

function rotateCarousel() {
  const angle = currentIndex * -90;
  carousel.style.transform = `rotateY(${angle}deg)`;
}

function nextImage() {
  currentIndex = (currentIndex + 1) % items.length;
  rotateCarousel();
}

function previousImage() {
  currentIndex = (currentIndex - 1 + items.length) % items.length;
  rotateCarousel();
}

// 监听用户操作或者定时器触发旋转动画
document.querySelector('.next-button').addEventListener('click', nextImage);
document.querySelector('.previous-button').addEventListener('click', previousImage);
setInterval(nextImage, 5000);