amp-carousel

简介

amp-carousel 组件允许沿水平轴显示多个相似的内容。

设置

在头部导入 carousel 组件。

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

基本用法

使用 type="carousel" 将图像列表显示为连续条。

<amp-carousel height="300" layout="fixed-height" type="carousel" role="region" aria-label="Basic usage carousel">
  <amp-img src="/static/samples/img/image1.jpg" width="400" height="300" alt="a sample image"></amp-img>
  <amp-img src="/static/samples/img/image2.jpg" width="400" height="300" alt="another sample image"></amp-img>
  <amp-img src="/static/samples/img/image3.jpg" width="400" height="300" alt="and another sample image"></amp-img>
</amp-carousel>

幻灯片

使用 type="slides" 将图像列表显示为幻灯片。

<amp-carousel width="400" height="300" layout="responsive" type="slides" role="region" aria-label="type='slides' carousel">
  <amp-img src="/static/samples/img/image1.jpg" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="/static/samples/img/image2.jpg" width="400" height="300" layout="responsive" alt="another sample image"></amp-img>
  <amp-img src="/static/samples/img/image3.jpg" width="400" height="300" layout="responsive" alt="and another sample image"></amp-img>
</amp-carousel>

自动播放

autoplay 属性（仅限 type="slides"）无需用户交互即可将幻灯片前进到下一张幻灯片，默认情况下，它将在 5000 毫秒（5 秒）的时间间隔前进一张幻灯片，并且可以通过 delay 属性覆盖此间隔。

<amp-carousel width="400" height="300" layout="responsive" type="slides" autoplay delay="2000" role="region" aria-label="Carousel with autoplay">
  <amp-img src="/static/samples/img/image1.jpg" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="/static/samples/img/image2.jpg" width="400" height="300" layout="responsive" alt="another sample image"></amp-img>
  <amp-img src="/static/samples/img/image3.jpg" width="400" height="300" layout="responsive" alt="and another sample image"></amp-img>
</amp-carousel>

按钮

默认情况下，轮播按钮使用内联 SVG 作为背景图像。

您可以使用 .amp-carousel-button-prev 和 .amp-carousel-button-next 类，用您自己的 SVG 或图像覆盖它们。

<amp-carousel id="custom-button" width="400" height="300" layout="responsive" type="slides" autoplay delay="2000" role="region" aria-label="Carousel with custom button styles">
  <amp-img src="/static/samples/img/image1.jpg" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="/static/samples/img/image2.jpg" width="400" height="300" layout="responsive" alt="another sample image"></amp-img>
  <amp-img src="/static/samples/img/image3.jpg" width="400" height="300" layout="responsive" alt="and another sample image"></amp-img>
</amp-carousel>

支持的内容

这些节点中的每一个也可能具有任意的 HTML 子元素。

这是一个蓝色框。

这是一个红色框。

这是一个绿色框。

<amp-carousel height="300" layout="fixed-height" type="slides" role="region" aria-label="Carousel with arbitrary HTML content">
  <div>
    <div class="blue-box">
      This is a blue box.
    </div>
  </div>
  <div>
    <div class="red-box">
      This is a red box.
    </div>
  </div>
  <div>
    <div class="green-box">
      This is a green box.
    </div>
  </div>
</amp-carousel>

amp-carousel 的一个很好的用例是图像库，这里有一些示例。

需要进一步解释？

如果此页面上的解释没有涵盖您的所有问题，请随时与其他 AMP 用户联系以讨论您的确切用例。

转到 Stack Overflow

一个未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的长期参与者，但也欢迎您为自己特别热衷的问题做出一次性贡献。

在 GitHub 上编辑示例

由 @sebastianbenz 编写