如何让定制的猫头鹰旋转木马的圆点可点击？

<div class="carousel">
  <!-- 猫头鹰旋转木马的内容 -->
</div>

<div class="carousel-dots">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <!-- 其他圆点 -->
</div>

.carousel-dots {
  text-align: center;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 5px;
  cursor: pointer;
}

.dot.active {
  background-color: #f00;
}

var dots = document.getElementsByClassName('dot');
var carousel = document.getElementsByClassName('carousel')[0];

for (var i = 0; i < dots.length; i++) {
  dots[i].addEventListener('click', function() {
    // 点击圆点时触发的操作
    // 可以根据点击的圆点索引来切换猫头鹰旋转木马的内容
    carousel.style.transform = 'rotate(' + (360 / dots.length * i) + 'deg)';
    
    // 切换圆点的激活状态
    for (var j = 0; j < dots.length; j++) {
      dots[j].classList.remove('active');
    }
    this.classList.add('active');
  });
}