移动版网页中的另一项常见功能是轮换展示。amp-carousel 组件让您可以非常轻松地向 AMP 网页添加轮换展示内容。我们先来看一个简单的示例,例如图片轮换展示。

简单的图片轮换展示

请务必添加 amp-carousel 组件库。为此,您需要将以下 JavaScript 请求添加到您文档的 <head> 代码中:

<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 组件。在此示例中,我们就将界面改为一次仅显示 1 张图片,并将轮换展示内容的布局设为自适应。

为此,我们需要先将 amp-carouseltypecarousel 更改slides,将 layout 更改responsive,并将 width 设置为 300(请确保既指定了 height 也指定了 width)。然后,将 "layout=responsive" 属性添加amp-carousel 的各个子级 amp-img

重新加载您的网页。现在,您看到的便不再是一系列滚动展示的元素,而是一次只能看到 1 个元素。沿水平方向滑动手指即可浏览下一个元素。滑动到第三个元素后,您将会无法再滑动。

接下来,添加 loop 属性。刷新网页后立即尝试向左滑动手指。轮换展示内容即会无休止地循环展示。

最后,让此项轮换展示以每 2 秒轮换 1 次的速度自动播放。为此,我们需要向 amp-carousel添加 autoplay 属性以及值为 2000delay 属性(即 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 真的能同时处理好这种组合中的所有内容吗?当然能!

首先,将下述样式添加到您的 <style amp-custom> 中,以确保 amp-fit-textamp-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 组件参考文档。