如何在旋转木马的“上一个”和“下一个”按钮中嵌入上一个和下一个图像

<button class="prev-button">上一个</button>
<button class="next-button">下一个</button>

.prev-button,
.next-button {
  background-color: #ccc;
  border: none;
  color: #fff;
  padding: 10px 20px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.prev-button {
  left: 20px;
}

.next-button {
  right: 20px;
}

// 获取旋转木马容器和按钮元素
const carousel = document.querySelector('.carousel');
const prevButton = document.querySelector('.prev-button');
const nextButton = document.querySelector('.next-button');

// 获取旋转木马中的所有图像
const images = carousel.querySelectorAll('img');
const totalImages = images.length;

// 设置当前图像的索引
let currentImageIndex = 0;

// 点击“上一个”按钮时更新当前图像
prevButton.addEventListener('click', () => {
  currentImageIndex = (currentImageIndex - 1 + totalImages) % totalImages;
  updateCarousel();
});

// 点击“下一个”按钮时更新当前图像
nextButton.addEventListener('click', () => {
  currentImageIndex = (currentImageIndex + 1) % totalImages;
  updateCarousel();
});

// 更新旋转木马的显示
function updateCarousel() {
  // 隐藏所有图像
  images.forEach(image => {
    image.style.display = 'none';
  });

  // 显示当前图像
  images[currentImageIndex].style.display = 'block';
}