AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

新增輪播

行動版網頁中另一個常見的功能是輪播。您可以使用 amp-carousel 元件，輕鬆將輪播新增至 AMP 網頁。我們先從一個簡單的範例開始，例如圖片輪播。

請記住，透過將以下 JavaScript 請求新增至文件 <head> 標記，以加入 amp-carousel 元件程式庫

<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 屬性 (值為 2000，例如 delay="2000") 新增至 amp-carousel。

您的最終結果應如下所示

<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 版面配置。顧名思義，固定高度元素會佔用可用的空間，但保持高度不變。對於固定高度元素，您必須定義 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 元件參考文件。

注意 – 在我們的最後一個範例中，您可能已經注意到 amp-ad 元件包含一個具有 placeholder 屬性的子 div 元素。在教學課程的前面，我們在 amp-ad 中遇到類似的情況，使用了 fallback。placeholder 和 fallback 之間有什麼區別？當父元素載入失敗時 (即如果沒有可用的廣告時)，就會顯示 Fallback 元素。placeholder 元素會在父元素載入時，取代父元素的位置顯示。從某種意義上說，這些元素標示了父元素載入程序的開始和結束。您可以在Placeholder 和 Fallback 指南中瞭解詳情。

上一章 下一章