如何在内容页面内添加一个旋转木马页面？

<div id="carousel-container">
  <!-- 旋转木马页面的内容将放在这里 -->
</div>

#carousel-container {
  width: 100%;
  height: 400px;
  background-color: #f2f2f2;
  /* 其他样式属性 */
}

// 获取容器元素
var carouselContainer = document.getElementById('carousel-container');

// 创建旋转木马页面的内容
var carouselContent = document.createElement('div');
carouselContent.className = 'carousel-content';

// 向旋转木马页面的内容中添加图片或其他内容
carouselContent.innerHTML = `
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
`;

// 将旋转木马页面的内容添加到容器元素中
carouselContainer.appendChild(carouselContent);

// 添加旋转木马的样式和动画效果
carouselContent.style.display = 'flex';
carouselContent.style.overflow = 'hidden';
carouselContent.style.animation = 'carousel 10s infinite linear';

// 定义旋转木马的动画
@keyframes carousel {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}