如何在AMP中显示旋转木马的圆点？

<amp-carousel layout="responsive" width="300" height="200" type="carousel">
  <div>
    <amp-img src="image1.jpg" width="300" height="200"></amp-img>
  </div>
  <div>
    <amp-img src="image2.jpg" width="300" height="200"></amp-img>
  </div>
  <div>
    <amp-img src="image3.jpg" width="300" height="200"></amp-img>
  </div>
</amp-carousel>

<div class="carousel-dots">
  <amp-selector layout="container" class="dots-selector" on="slideChange:carousel.goToSlide(index=event.index)">
    <div option="0" selected></div>
    <div option="1"></div>
    <div option="2"></div>
  </amp-selector>
</div>

<style amp-custom>
  .carousel-dots {
    text-align: center;
    margin-top: 10px;
  }

  .dots-selector div {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: gray;
    margin: 5px;
  }

  .dots-selector div[selected] {
    background-color: black;
  }
</style>