即插即用组件

AMP 提供了一个庞大的组件库，用于创建常见的微件和独特的 Web 元素。例如，可以折叠和展开内容部分的折叠式手风琴或用于收集和存储用户 Cookie 同意的 UI 控件。对于我们的第一个页面，我们将使用 amp-base-carousel 将我们的单个图像转换为图像轮播。

导入脚本

与 amp-img 不同，amp-base-carousel 组件是一个扩展组件。扩展组件逻辑不包含在前面讨论的样板代码提供的基本 AMP JS 中。这有助于保持 AMP 页面的轻巧和精简，方法是仅显式加载页面使用的组件的 JavaScript。

要使用 amp-base-carousel 组件，我们必须导入其脚本标记。复制下面的标记并将其放置在文档的头部。

您可以在每个组件的参考文档顶部找到其导入脚本。

<script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>

接下来，在第一个 <amp-img> 元素下包含另一个 <amp-img> 元素，然后将两者都包裹在 <amp-base-carousel> 标记中，如下所示

<amp-base-carousel width="600" height="400" layout="responsive">
  <amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" width="600" height="400" layout="responsive"></amp-img>
  <amp-img src="https://source.unsplash.com/4yCXNMLP9g8/600x400" width="600" height="400" layout="responsive"></amp-img>
</amp-base-carousel>

组件属性

您可能会注意到我们定义了熟悉的属性 width、height 和 layout。与 HTML 一样，属性在 AMP 中无处不在。但是，AMP 使用其他属性来自定义组件的行为。有些是通用元素属性，有些是特定于某些组件的特殊属性。让我们添加 loop 属性并将其设置为 true 并包含更多图像

<amp-base-carousel loop="true"  width="600" height="400" layout="responsive">
  <amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" width="600" height="400" layout="responsive"></amp-img>
  <amp-img src="https://source.unsplash.com/4yCXNMLP9g8/600x400" width="600" height="400" layout="responsive"></amp-img>
  <amp-img src="https://source.unsplash.com/QrgRXH81DXk/600x400" width="600" height="400" layout="responsive"></amp-img>
  <amp-img src="https://source.unsplash.com/8QJSi37vhms/600x400" width="600" height="400" layout="responsive"></amp-img>
</amp-base-carousel>

loop 属性是 amp-base-carousel 特有的，有助于定义其行为。我们可以使用其他属性（例如 auto-advance）进一步自定义我们的轮播！您可以在其参考页面上查看可用于 amp-base-carousel 的属性列表。所有组件参考文档都会列出可用的属性以及它们配置的行为，请参阅 AMP 组件库。

作者： @crystalonscript