如何在 AMP 中显示轮播点？答案

【问题标题】：How to show carousel dots in AMP?如何在 AMP 中显示轮播点？
【发布时间】：2016-11-04 21:26:20
【问题描述】：

在这个轮播中，我如何显示点？

<amp-carousel layout=fixed-height height=400 type=slides autoplay controls loop arrows dots='.'>
  <amp-img src="img/slaid.jpg" layout=fixed-height height=400></amp-img>
  <amp-img src="img/slaid.jpg" layout=fixed-height height=400></amp-img>
</amp-carousel>

【问题讨论】：

标签： carousel show amp-html

【解决方案1】：

这个codelab中有一个例子： https://codelabs.developers.google.com/codelabs/advanced-interactivity-in-amp/index.html

最终代码在这里：

<amp-carousel type="slides" layout="fixed-height" height=250 id="carousel" on="slideChange:AMP.setState({selected: {slide: event.index}})">
  <amp-img width=200 height=250 src="./shirts/black.jpg" [src]="shirts[selected.sku].image"></amp-img>
  <amp-img width=300 height=375 src="./shirts/black.jpg" [src]="shirts[selected.sku].image"></amp-img>
  <amp-img width=400 height=500 src="./shirts/black.jpg" [src]="shirts[selected.sku].image"></amp-img>
</amp-carousel>
<p class="dots">
  <span [class]="selected.slide == 0 ? 'current' : ''" class="current"></span>
  <span [class]="selected.slide == 1 ? 'current' : ''"></span>
  <span [class]="selected.slide == 2 ? 'current' : ''"></span>
</p>

https://github.com/googlecodelabs/advanced-interactivity-in-amp/blob/master/static/final.html

【讨论】：

【解决方案2】：

可以通过在 CSS 自定义属性 <style></style> 中指明来添加导航点。这是来自Styling/Theming with AMP 的 Github 示例：

<head>
  <style>
    amp-carousel {
      --arrow-color: green;
      --dots: {
        opacity: 50%;
        color: blue;
      }
    }
  </style>
</head>

<body>
  <amp-carousel width=500 height=500>
    <div>
      <amp-img width=500 height=500 src="https://placekitten.com/g/500/500">
      </amp-img>
    </div>
    <div>
      <amp-img width=500 height=500 src="https://placekitten.com/g/500/500">
      </amp-img>
    </div>
  </amp-carousel>
</body>

您也可以查看此SO thread 以获取更多参考。

【讨论】：