amp-carousel

簡介

The amp-carousel 元件允許沿水平軸顯示多個相似的內容片段。

設定

在標頭中匯入 carousel 元件。

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

基本用法

使用 type="carousel" 將圖片列表顯示為連續條狀。

<amp-carousel height="300" layout="fixed-height" type="carousel" role="region" aria-label="Basic usage carousel">
  <amp-img src="/static/samples/img/image1.jpg" width="400" height="300" alt="a sample image"></amp-img>
  <amp-img src="/static/samples/img/image2.jpg" width="400" height="300" alt="another sample image"></amp-img>
  <amp-img src="/static/samples/img/image3.jpg" width="400" height="300" alt="and another sample image"></amp-img>
</amp-carousel>

投影片

使用 type="slides" 將圖片列表顯示為投影片。

<amp-carousel width="400" height="300" layout="responsive" type="slides" role="region" aria-label="type='slides' carousel">
  <amp-img src="/static/samples/img/image1.jpg" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="/static/samples/img/image2.jpg" width="400" height="300" layout="responsive" alt="another sample image"></amp-img>
  <amp-img src="/static/samples/img/image3.jpg" width="400" height="300" layout="responsive" alt="and another sample image"></amp-img>
</amp-carousel>

自動播放

autoplay 屬性 (僅限 type="slides") 會在沒有使用者互動的情況下將投影片前進到下一張投影片，預設情況下，它會以 5000 毫秒間隔 (5 秒) 前進一張投影片，並且可以被 delay 屬性覆寫。

<amp-carousel width="400" height="300" layout="responsive" type="slides" autoplay delay="2000" role="region" aria-label="Carousel with autoplay">
  <amp-img src="/static/samples/img/image1.jpg" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="/static/samples/img/image2.jpg" width="400" height="300" layout="responsive" alt="another sample image"></amp-img>
  <amp-img src="/static/samples/img/image3.jpg" width="400" height="300" layout="responsive" alt="and another sample image"></amp-img>
</amp-carousel>

按鈕

預設情況下，carousel 按鈕使用內嵌 SVG 作為背景圖片。

您可以使用 .amp-carousel-button-prev 和 .amp-carousel-button-next 類別，以您自己的 SVG 或圖片覆寫這些按鈕。

<amp-carousel id="custom-button" width="400" height="300" layout="responsive" type="slides" autoplay delay="2000" role="region" aria-label="Carousel with custom button styles">
  <amp-img src="/static/samples/img/image1.jpg" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="/static/samples/img/image2.jpg" width="400" height="300" layout="responsive" alt="another sample image"></amp-img>
  <amp-img src="/static/samples/img/image3.jpg" width="400" height="300" layout="responsive" alt="and another sample image"></amp-img>
</amp-carousel>

支援的內容

這些節點中的每一個也可能具有任意的 HTML 子元素。

這是一個藍色方塊。

這是一個紅色方塊。

這是一個綠色方塊。

<amp-carousel height="300" layout="fixed-height" type="slides" role="region" aria-label="Carousel with arbitrary HTML content">
  <div>
    <div class="blue-box">
      This is a blue box.
    </div>
  </div>
  <div>
    <div class="red-box">
      This is a red box.
    </div>
  </div>
  <div>
    <div class="green-box">
      This is a green box.
    </div>
  </div>
</amp-carousel>

amp-carousel 的一個很好的使用案例是圖片庫，這裡有一些範例。

需要進一步說明嗎？

如果此頁面上的說明未能涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow

未說明的特色功能？

AMP 專案非常鼓勵您的參與和貢獻！我們希望您能成為我們開源社群的長期參與者，但我們也歡迎您針對您特別關注的問題提供一次性的貢獻。

在 GitHub 上編輯範例

由 @sebastianbenz 撰寫