隨插即用元件

AMP 提供了一個龐大的元件庫，可建立常見的小工具和獨特的網頁元素。例如，可摺疊和展開內容區塊的手風琴元件，或用於收集和儲存使用者 Cookie 同意的 UI 控制元件。對於我們的第一個頁面，我們將使用 amp-base-carousel 將單一圖片轉換為圖片輪播。

匯入指令碼 (Import the script)

與 amp-img 不同，amp-base-carousel 元件是一個擴充元件。擴充元件的邏輯不包含在先前討論過的樣板程式碼提供的基本 AMP JS 中。這有助於僅明確載入頁面所使用元件的 JavaScript，從而保持 AMP 頁面的輕量和精簡。

要使用 amp-base-carousel 元件，我們必須匯入其指令碼標籤。複製下面的標籤並將其放入文件的 head 中。

您可以在每個元件的參考文件頂部找到其匯入指令碼。

<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