添加轮播图
移动页面中另一个常见的功能是轮播图。您可以使用 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 秒自动播放一次。向 amp-carousel 添加 autoplay 属性和值为 2000 的 delay 属性（例如，delay="2000"）。
您的最终结果应如下所示
<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 组件参考文档。