添加轮播图
移动页面中的另一个常见功能是轮播图。您可以使用 amp-carousel 组件轻松地将轮播图添加到 AMP 页面。让我们从一个简单的例子开始，比如一个图片轮播图。
简单的图片轮播图
请记住，通过将以下 JavaScript 请求添加到文档的 <head> 标记中，包含 amp-carousel 组件库
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
接下来，让我们嵌入一个简单的图像轮播图，它具有响应式布局和预定义的宽度和高度。添加以下内容到您的页面
<amp-carousel layout="fixed-height" height="168" type="carousel" >
<amp-img src="mountains-1.jpg" width="300" height="168"></amp-img>
<amp-img src="mountains-2.jpg" width="300" height="168"></amp-img>
<amp-img src="mountains-3.jpg" width="300" height="168"></amp-img>
</amp-carousel>
刷新您的页面，您应该会看到一个轮播图
可以通过多种方式配置 amp-carousel 组件。让我们更改 UI，使其一次只显示一个图像，并使轮播图的布局具有响应性。
为此，首先将 amp-carousel 的 type 从 carousel 更改为 slides，将 layout 更改为 responsive，并将 width 设置为 300（确保它同时定义了 height 和 width）。将 "layout=responsive" 属性添加到 amp-carousel 的 amp-img 子项。
重新加载您的页面。现在，您将一次看到一个元素，而不是一个可滚动的元素列表。尝试水平滑动以浏览各个元素。如果您滑动到第三个元素，您将无法再滑动。
接下来，添加 loop 属性。刷新页面，并尝试立即向左滑动。轮播图会无限循环。
最后，让我们使这个轮播图每 2 秒自动播放一次。将 autoplay 属性和值为 2000 的 delay 属性（例如，delay="2000"）添加到 amp-carousel。
您的最终结果应如下所示
<amp-carousel layout="responsive" width="300" height="168" type="slides" autoplay delay="2000" loop>
<amp-img src="mountains-1.jpg" width="300" height="168" layout="responsive"></amp-img>
<amp-img src="mountains-2.jpg" width="300" height="168" layout="responsive"></amp-img>
<amp-img src="mountains-3.jpg" width="300" height="168" layout="responsive"></amp-img>
</amp-carousel>
刷新页面，并试用一下！
amp-carousel 的类型为 carousel 时，我们使用了 fixed-height 布局类型。carousel 类型支持的布局类型有限；例如，carousel 类型不支持 responsive 布局。顾名思义，固定高度元素会占用可用的空间，但会保持高度不变。对于固定高度元素，您必须定义 height 属性，而 width 属性应为 auto 或不设置。混合轮播图内容
图片轮播图非常棒，但是如果我们希望在轮播图中显示更复杂的内容呢？让我们尝试将一些内容混合一下，在一个轮播图中放入一个广告、一些文本和一个图像。 amp-carousel 真的可以一次处理这样的混合吗？当然可以！
首先，将此样式添加到您的 <style amp-custom> 中，以确保 amp-fit-text 和 amp-carousel 组件可以安全地协同工作
amp-fit-text {
white-space: normal;
}
现在，将您的简单轮播图替换为此
<amp-carousel layout="fixed-height" height="250" type="carousel" >
<amp-img src="blocky-mountains-1.jpg" width="300" height="250"></amp-img>
<amp-ad width="300" height="250"
type="doubleclick"
data-slot="/35096353/amptesting/image/static">
<div placeholder>This ad is still loading.</div>
</amp-ad>
<amp-fit-text width="300" height="250" layout="fixed">
Big, bold article quote goes here.
</amp-fit-text>
</amp-carousel>
刷新页面，您应该会看到类似这样的内容
要了解更多信息，请参阅 amp-carousel 组件参考文档。