隨插即用元件

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 撰寫