隨插即用組件

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

匯入指令碼

與 amp-img 不同，amp-base-carousel 組件是一個擴充組件。擴充組件邏輯不包含在稍早討論的樣板程式碼提供的基礎 AMP JS 中。這有助於保持 AMP 頁面的輕巧和精簡，因為它只會明確載入頁面使用的組件的 JavaScript。

若要使用 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-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