如何将旋转木马与垂直缩略图一起使用

<div class="carousel-container">
  <div class="carousel"></div>
  <div class="thumbnail-slider"></div>
</div>

.carousel {
  /* 旋转木马样式设置 */
}

.thumbnail-slider {
  /* 垂直缩略图样式设置 */
}

// 获取旋转木马和垂直缩略图的DOM元素
const carousel = document.querySelector('.carousel');
const thumbnailSlider = document.querySelector('.thumbnail-slider');

// 在旋转木马切换时更新垂直缩略图
carousel.addEventListener('carouselChange', function(event) {
  const selectedIndex = event.detail.selectedIndex;
  
  // 更新垂直缩略图的选中状态
  thumbnailSlider.children[selectedIndex].classList.add('selected');
  thumbnailSlider.children[selectedIndex].siblings().classList.remove('selected');
});

// 在垂直缩略图点击时切换旋转木马
thumbnailSlider.addEventListener('click', function(event) {
  if (event.target.matches('img')) {
    const selectedIndex = Array.from(thumbnailSlider.children).indexOf(event.target);
    
    // 切换旋转木马到对应索引
    carousel.switchTo(selectedIndex);
  }
});