amp-base-carousel

1.0 0.1

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

<script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-1.0.js"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css">

用法

用於沿水平或垂直軸顯示多個相似內容的通用輪播。

amp-base-carousel 元件的每個直接子項都會被視為輪播中的項目。每個節點也可以有任意 HTML 子項。

輪播包含任意數量的項目，以及可選的導覽箭頭，以向前或向後移動單個項目。

如果使用者滑動或使用可自訂的箭頭按鈕，輪播會在項目之間前進。

在有效的 AMP 文件之外獨立使用

Bento 可讓您在非 AMP 頁面中使用 AMP 元件，而無需完全提交有效的 AMP。您可以採用這些元件，並將它們放置在不支援 AMP 的架構和 CMS 的實作中。如要瞭解詳情，請參閱我們的指南：在非 AMP 頁面中使用 AMP 元件。

如要尋找獨立版本的 amp-base-carousel，請參閱 bento-base-carousel。

使用者應注意的行為

由右至左滑動變更

<amp-base-carousel> 要求您定義何時處於由右至左 (rtl) 的環境 (例如，阿拉伯文、希伯來文頁面)。雖然輪播通常在沒有此設定的情況下也能運作，但可能存在一些錯誤。您可以透過以下方式告知輪播應以 rtl 方式運作

<amp-base-carousel dir="rtl" …>
  …
</amp-base-carousel>

如果輪播處於 RTL 環境中，而您希望輪播以 LTR 方式運作，則可以在輪播上明確設定 dir="ltr"。

投影片版面配置

在未指定 mixed-lengths 時，投影片會由輪播自動調整大小。您應為投影片指定 layout="flex-item"

<amp-base-carousel …>
  <amp-img layout="flex-item" src="…"></amp-img>
</amp-base-carousel>

當水平配置輪播時，投影片的預設高度為 100%。這可以透過 CSS 或使用 layout="fixed-height" 輕鬆變更。指定高度時，投影片將在輪播中垂直置中。

如果您想要水平置中投影片內容，則需要建立一個包裝元素，並使用該元素來置中內容。

可見投影片數量

當使用 visible-slides 變更可見投影片數量以回應媒體查詢時，您可能會想要變更輪播本身的外觀比例，以符合新的可見投影片數量。例如，如果您想要一次顯示三張投影片，且外觀比例為 1:1，則您會希望輪播本身的外觀比例為 3:1。同樣地，一次顯示四張投影片時，您會希望外觀比例為 4:1。此外，當變更 visible-slides 時，您可能也會想要變更 advance-count。

<!-- Using an aspect ratio of 3:2 for the slides in this example. -->
<amp-base-carousel
  layout="responsive"
  width="3"
  height="1"
  heights="(min-width: 600px) calc(100% * 4 * 3 / 2), calc(100% * 3 * 3 / 2)"
  visible-count="(min-width: 600px) 4, 3"
  advance-count="(min-width: 600px) 4, 3"
>
  <amp-img layout="flex-item" src="…"></amp-img>
  …
</amp-base-carousel>

屬性

媒體查詢

可以設定 <amp-base-carousel> 的屬性，以根據 媒體查詢 使用不同的選項。

設定選項

可見投影片數量

混合長度

true 或 false，預設為 false。如果為 true，則為每個投影片使用現有的寬度 (或水平方向時的高度)。這允許使用具有不同寬度的投影片的輪播。

visible-count

數字，預設為 1。決定在給定時間應顯示多少張投影片。可以使用小數值來顯示部分額外投影片。當 mixed-length 為 true 時，此選項會被忽略。

advance-count

數字，預設為 1。決定使用上一個或下一個箭頭前進時，輪播將前進多少張投影片。在指定 visible-count 屬性時，這非常有用。

自動前進

auto-advance

true 或 false，預設為 false。根據延遲自動將輪播前進到下一張投影片。如果使用者手動變更投影片，則自動前進會停止。請注意，如果未啟用 loop，則在到達最後一個項目時，自動前進會向後移動到第一個項目。

auto-advance-count

數字，預設為 1。決定自動前進時，輪播將前進多少張投影片。在指定 visible-count 屬性時，這非常有用。

auto-advance-interval

數字，預設為 1000。指定輪播後續自動前進之間的時間量 (以毫秒為單位)。

auto-advance-loops

數字，預設為 ∞。輪播在停止前應前進瀏覽投影片的次數。

貼齊

snap

true 或 false，預設為 true。決定輪播在捲動時是否應貼齊在投影片上。

snap-align

start 或 center。當靠開始對齊時，投影片的開始 (例如，水平對齊時的左邊緣) 會與輪播的開始對齊。當靠中心對齊時，投影片的中心會與輪播的中心對齊。

snap-by

數字，預設為 1。這決定了貼齊的精細度，並且在使用 visible-count 時非常有用。

其他

controls

"always"、"auto" 或 "never"，預設為 "auto"。這決定是否以及何時顯示上一個/下一個導覽箭頭。注意：當 outset-arrows 為 true 時，箭頭會 "always" 顯示。

• always：箭頭始終顯示。
• auto：當輪播最近透過滑鼠收到互動時，箭頭會顯示；當輪播最近透過觸控收到互動時，箭頭不會顯示。在觸控裝置上首次載入時，箭頭會顯示直到首次互動。
• never：箭頭永遠不會顯示。

slide

數字，預設為 0。這決定了輪播中顯示的初始投影片。這可以與 amp-bind 搭配使用，以控制目前顯示的投影片。

loop

true 或 false，省略時預設為 false。如果為 true，則輪播將允許使用者從第一個項目移回最後一個項目，反之亦然。迴圈播放必須至少存在 visible-count 三倍的投影片。

orientation

horizontal 或 vertical，預設為 horizontal。當 horizontal 時，輪播將水平配置，使用者可以左右滑動。當 vertical 時，輪播會垂直配置，使用者可以向上和向下滑動。

通用屬性

此元素包含擴充至 AMP 元件的通用屬性。

動作

next

將輪播向前移動 advance-count 張投影片。

prev

將輪播向後移動 advance-count 張投影片。

goToSlide

將輪播移動到 index 引數指定的投影片。

活動

slideChange

當輪播顯示的索引變更時，會觸發此事件。新的索引可透過 event.index 取得。

樣式設定

您可以自由使用 amp-base-carousel 元素選取器來設定輪播的樣式。

自訂箭頭按鈕

箭頭按鈕可以透過傳入您自己的自訂標記來自訂。例如，您可以使用以下 HTML 和 CSS 重新建立預設樣式

.carousel-prev,
.carousel-next {
  filter: drop-shadow(0px 1px 2px #4a4a4a);
  width: 40px;
  height: 40px;
  padding: 20px;
  background-color: transparent;
  border: none;
  outline: none;
}

.carousel-prev {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path  d="M14,7.4 L9.4,12 L14,16.6" fill="none" stroke="#fff" stroke-width="2px" stroke-linejoin="round" stroke-linecap="round" /></svg>');
}

.carousel-next {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path  d="M10,7.4 L14.6,12 L10,16.6" fill="none" stroke="#fff" stroke-width="2px" stroke-linejoin="round" stroke-linecap="round" /></svg>');
}

<amp-base-carousel …>
  <div>first slide</div>
  …
  <button slot="next-arrow" class="carousel-next" aria-label="Next"></button>
  <button
    slot="prev-arrow"
    class="carousel-prev"
    aria-label="Previous"
  ></button>
</amp-base-carousel>

如果您想要對箭頭按鈕進行更多自訂，可以使用 next 和 prev 動作。例如，如果您想要將按鈕放置在輪播下方，並使用「上一個」和「下一個」字詞，而不是將它們放在預設位置，則可以使用以下 HTML

  <amp-base-carousel id="carousel-1" …>
    …
    <div slot="next-arrow"></div>
    <div slot="prev-arrow"></div>
  </amp-carousel>
  <button on="tap:carousel-1.prev()">Previous</button>
  <button on="tap:carousel-1.next()">Next</button>

版本注意事項

與 0.1 不同，實驗性 1.0 版本的 amp-base-carousel 允許透過 "orientation"="horizontal"|"vertical" 屬性 (而不是 "horizontal"="true"|"false" 屬性) 設定輪播投影片方向。