添加轮播
移动页面中另一个常见的功能是轮播。您可以使用 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 组件参考文档。