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