加入輪播
行動版網頁中另一個常見的功能是輪播。您可以使用 amp-carousel 元件，輕鬆將輪播加入 AMP 網頁。我們先從簡單的範例開始，例如圖片輪播。
簡易圖片輪播
請記得加入 amp-carousel 元件程式庫，方法是將下列 JavaScript 要求加入至您文件的 <head> 標記中
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
接下來，讓我們嵌入一個簡易圖片輪播，其中包含回應式版面配置以及預先定義的寬度和高度。將下列內容加入至您的網頁
<amp-carousel layout="fixed-height" height="168" type="carousel" >
<amp-img src="mountains-1.jpg" width="300" height="168"></amp-img>
<amp-img src="mountains-2.jpg" width="300" height="168"></amp-img>
<amp-img src="mountains-3.jpg" width="300" height="168"></amp-img>
</amp-carousel>
重新整理您的網頁，您應該就會看到輪播
amp-carousel 元件有多種設定方式。讓我們變更 UI，讓畫面一次只顯示一張圖片，並讓輪播的版面配置具有回應性。
若要執行這項操作，請先將 amp-carousel 的 type 從 carousel 變更為 slides，將 layout 變更為 responsive，並將 width 設定為 300 (確保同時定義 height 和 width)。將 "layout=responsive" 屬性加入至 amp-carousel 的 amp-img 子項。
重新載入您的網頁。現在，您一次只會看到一個元素，而不是可捲動的元素清單。試著水平滑動以瀏覽各個元素。如果您滑動到第三個元素，就無法再繼續滑動。
接下來，加入 loop 屬性。重新整理網頁，並立即嘗試向左滑動。輪播會無限循環播放。
最後，讓我們將這個輪播設定為每 2 秒自動播放。將 autoplay 屬性和 delay 屬性加入至 amp-carousel，並將 delay 屬性的值設為 2000 (例如 delay="2000")。
您的最終結果應如下所示
<amp-carousel layout="responsive" width="300" height="168" type="slides" autoplay delay="2000" loop>
<amp-img src="mountains-1.jpg" width="300" height="168" layout="responsive"></amp-img>
<amp-img src="mountains-2.jpg" width="300" height="168" layout="responsive"></amp-img>
<amp-img src="mountains-3.jpg" width="300" height="168" layout="responsive"></amp-img>
</amp-carousel>
重新整理網頁並試用看看！
amp-carousel 的類型為 carousel 時，我們使用了 fixed-height 版面配置類型。carousel 類型支援的版面配置類型有限；例如，carousel 類型不支援 responsive 版面配置。顧名思義，fixed-height 元素會佔用可用的空間，但高度保持不變。對於 fixed-height 元素，您必須定義 height 屬性，而 width 屬性應設為 auto 或不設定。混合輪播內容
圖片輪播很棒，但如果我們希望輪播中顯示更複雜的內容呢？讓我們試著混搭一下，在單一輪播中放入廣告、一些文字和一張圖片。amp-carousel 真的可以一次處理這麼多種混合內容嗎？當然可以！
首先，讓我們將這個樣式加入至您的 <style amp-custom>，以確保 amp-fit-text 和 amp-carousel 元件能安全地協同運作
amp-fit-text {
white-space: normal;
}
現在，將您的簡易輪播替換為這個
<amp-carousel layout="fixed-height" height="250" type="carousel" >
<amp-img src="blocky-mountains-1.jpg" width="300" height="250"></amp-img>
<amp-ad width="300" height="250"
type="doubleclick"
data-slot="/35096353/amptesting/image/static">
<div placeholder>This ad is still loading.</div>
</amp-ad>
<amp-fit-text width="300" height="250" layout="fixed">
Big, bold article quote goes here.
</amp-fit-text>
</amp-carousel>
重新整理網頁，您應該會看到類似這樣的內容
若要瞭解詳情，請參閱 amp-carousel 元件參考文件。