Web开发中的另一个常见功能是轮播。 AMP包括旨在满足此需求的通用组件。我们从一个简单的例子开始，例如图像的轮播。
记住通过向文档的<head>标签添加以下JavaScript请求来包括轮播组件库：
<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>
刷新您的页面，您应该在页面中看到一个轮播：
轮播组件可以以各种方式配置。尝试将类型更改为slides，并查看结果。确保更改amp-carousel的layout属性和其中的图像也是响应的。
现在，而不是一个滚动的元素列表，您将一次看到一个元素。尝试水平滑动以移动元素。如果您滑动到第三个元素，您将无法进一步滑动。
接下来，添加loop属性。刷新页面，并尝试立即向左滑动。轮播无休止地循环。
最后，让我们以每2秒的速度自动播放这个轮播。将自动播放属性添加到页面，延迟属性的值为2000，如：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>
刷新页面并给它一个转动！
注意：您可能已经注意到我们在轮播中使用了固定高度的布局类型。这是旋转木马类型的要求，而幻灯片类型需要响应布局类型。固定高度元素占用可用空间，但保持高度不变。必须定义height属性，而width属性不应该存在，或者应该设置为auto，以使固定高度工作。
图像轮播是很棒的，但如果我们想要更复杂的内容出现在我们的轮播中呢？让我们尝试通过在一个轮播中放置广告，一些文字和图像来混合东西。amp轮播真的可以一次处理这样的混合物吗？
首先，我们将此样式添加到页面，以确保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 advert 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>
刷新页面，你应该看到这样的东西：
了解有关Carousel component的更多信息。
注意：在上一个例子中，您可能已经注意到amp-ad组件包含带有占位符属性的子div元素。如果你记得我们在codelab中使用了fallback系统，在amp-ad中遇到了类似的情况。占位符与回退之间有什么区别？当父元素无法加载时，即如果没有可用的广告，则出现回退元素。而占位符元素在加载时出现在父元素的位置。从某种意义上说，每个属性都会预订父元素的加载过程。
重要提示：遗憾的是，amp-ad组件在幕后使用iframe可能会干扰轮播本身的滑动手势。这是一个正在调查的已知问题。
