添加轮播
移动页面中的另一个常见功能是轮播。你可以使用 amp-carousel 组件轻松地将轮播添加到 AMP 页面。我们从一个简单的示例开始，比如图像轮播。
简单图像轮播
请记住，通过在文档的 <head> 标记中添加以下 JavaScript 请求来包含 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-img，它是 amp-carousel 的子级。
重新加载您的页面。现在，您将看到一次一个元素，而不是一个元素的滚动列表。尝试水平滑动以浏览元素。如果您滑动到第三个元素，则无法再进一步滑动。
接下来，添加 loop 属性。刷新页面，然后立即尝试向左滑动。轮播会无限循环。
最后，让我们以每 2 秒一次的速度使此轮播自动播放。将 autoplay 属性和 delay 属性（值为 2000，例如 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组件参考文档。