隨插即用元件

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