Amp html amp转盘库活动缩略图

在amp转盘（带预览的图像库）的基本示例中 有没有办法更改活动按钮的样式？ 因此，聚焦按钮（即使在自动播放模式下）通过css样式高亮显示

<amp-carousel id="carousel-with-preview"  width="400" height="300" layout="responsive" type="slides" autoplay>
<amp-img src="https://unsplash.it/400/300?image=10" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
<amp-img src="https://unsplash.it/400/300?image=11" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
<amp-img src="https://unsplash.it/400/300?image=12" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
<amp-img src="https://unsplash.it/400/300?image=13" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
</amp-carousel>
<div class="carousel-preview">
<button on="tap:carousel-with-preview.goToSlide(index=0)"><amp-img src="https://unsplash.it/60/40?image=10" width="60" height="40" layout="responsive" alt="a sample image"></amp-img></button>
<button on="tap:carousel-with-preview.goToSlide(index=1)"><amp-img src="https://unsplash.it/60/40?image=11" width="60" height="40" layout="responsive" alt="a sample image"></amp-img></button>
<button on="tap:carousel-with-preview.goToSlide(index=2)"><amp-img src="https://unsplash.it/60/40?image=12" width="60" height="40" layout="responsive" alt="a sample image"></amp-img></button>
<button on="tap:carousel-with-preview.goToSlide(index=3)"><amp-img src="https://unsplash.it/60/40?image=13" width="60" height="40" layout="responsive" alt="a sample image"></amp-img></button>
</div>

---

虽然我花了几个小时寻找一种方法才发布，但我还是在发布后找到了解决方案：）

这可以使用amp bind完成，将amp bind添加到头部

<script async custom-element=\"amp-bind\" src=\"https://cdn.ampproject.org/v0/amp-bind-0.1.js\"></script>

如果选中，将类添加到具有活动类的按钮

<div class="carousel-preview">
<button [class]="selected.slide == 0 ? 'active' : ''" class="active" on="tap:carousel-with-preview.goToSlide(index=0)">title1</button>
<button [class]="selected.slide == 1 ? 'active' : ''" on="tap:carousel-with-preview.goToSlide(index=1)">title2</button>
<button [class]="selected.slide == 2 ? 'active' : ''" on="tap:carousel-with-preview.goToSlide(index=2)">title3</button>
<button [class]="selected.slide == 3 ? 'active' : ''" on="tap:carousel-with-preview.goToSlide(index=3)">title4</button>
<button [class]="selected.slide == 4 ? 'active' : ''" on="tap:carousel-with-preview.goToSlide(index=4)">title5</button>
</div>

标题1
标题2
标题3
标题4
标题5

虽然我花了几个小时寻找一种方法才发布，但我还是在发布后找到了解决方案：）

这可以使用amp bind完成，将amp bind添加到头部

<script async custom-element=\"amp-bind\" src=\"https://cdn.ampproject.org/v0/amp-bind-0.1.js\"></script>

如果选中，将类添加到具有活动类的按钮

<div class="carousel-preview">
<button [class]="selected.slide == 0 ? 'active' : ''" class="active" on="tap:carousel-with-preview.goToSlide(index=0)">title1</button>
<button [class]="selected.slide == 1 ? 'active' : ''" on="tap:carousel-with-preview.goToSlide(index=1)">title2</button>
<button [class]="selected.slide == 2 ? 'active' : ''" on="tap:carousel-with-preview.goToSlide(index=2)">title3</button>
<button [class]="selected.slide == 3 ? 'active' : ''" on="tap:carousel-with-preview.goToSlide(index=3)">title4</button>
<button [class]="selected.slide == 4 ? 'active' : ''" on="tap:carousel-with-preview.goToSlide(index=4)">title5</button>
</div>

标题1
标题2
标题3
标题4
标题5