amp-stream-gallery

1.0 0.1

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

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

用法

串流圖庫，用於沿著水平軸一次顯示多個相似的內容片段。如要實作更自訂化的 UX，請參閱 amp-base-carousel。

範例

在以下範例中，我們使用 amp-stream-gallery 在回應式容器中顯示其內容，根據viewport (可視區域) 大小，一次顯示不同數量的子項。

<amp-stream-gallery width="7.5" height="2" layout="responsive">
  <amp-img src="img1.png" layout="flex-item"></amp-img>
  <amp-img src="img2.png" layout="flex-item"></amp-img>
  <amp-img src="img3.png" layout="flex-item"></amp-img>
  <amp-img src="img4.png" layout="flex-item"></amp-img>
  <amp-img src="img5.png" layout="flex-item"></amp-img>
  <amp-img src="img6.png" layout="flex-item"></amp-img>
  <amp-img src="img7.png" layout="flex-item"></amp-img>
</amp-stream-gallery>

amp-stream-gallery 元件的每個直接子項都會被視為圖庫中的一個項目。這些節點中的每一個也可能具有任意 HTML 子項。

圖庫包含任意數量的項目，以及可選的導航箭頭，可向前或向後移動指定數量的項目。

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

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

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

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

使用者應注意的行為

投影片版面配置

投影片會由輪播自動調整大小。您應該為投影片指定 layout="flex-item"

<amp-stream-gallery …>
  <amp-img layout="flex-item" src="…"></amp-img>
</amp-stream-gallery>

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

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

屬性

媒體查詢

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

行為

controls (控制項)

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

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

extra-space (額外空間)

可以是 "around" 或未定義。這決定在輪播中顯示計算出的可見投影片數量後，如何分配額外空間。如果為 "around"，則空白區域會使用 justify-content: center 在輪播周圍均勻分配；否則，空間會分配到 LTR (從左至右) 文件的輪播右側，以及 RTL (從右至左) 文件的左側。

loop (循環)

可以是 true 或 false，預設為 true。為 true 時，輪播將允許使用者從第一個項目移回最後一個項目，反之亦然。必須至少有三個投影片存在才能發生循環。

outset-arrows (外側箭頭)

可以是 true 或 false，預設為 false。為 true 時，輪播會將其箭頭顯示在外側，並位於投影片的兩側。請注意，使用外側箭頭時，投影片容器的有效長度將比其給定容器的分配空間少 100 像素 - 每側箭頭各 50 像素。為 false 時，輪播會將其箭頭顯示在內側，並覆蓋在投影片的左右邊緣之上。

peek (偷看)

數字，預設為 0。這決定了要顯示多少額外的投影片 (在目前投影片的一側或兩側)，作為向使用者指示輪播可滑動的提示。

通用屬性

此元素包含擴展到 AMP 元件的通用屬性。

圖庫投影片可見度

min-visible-count (最小可見計數)

數字，預設為 1。決定在給定時間應顯示的最少投影片數量。可以使用小數值來使部分額外投影片可見。

max-visible-count (最大可見計數)

數字，預設為 Number.MAX_VALUE。決定在給定時間應顯示的最多投影片數量。可以使用小數值來使部分額外投影片可見。

min-item-width (最小項目寬度)

數字，預設為 1。決定每個項目的最小寬度，用於解析在圖庫的整體寬度內一次可以顯示多少個完整項目。

max-item-width (最大項目寬度)

數字，預設為 Number.MAX_VALUE。決定每個項目的最大寬度，用於解析在圖庫的整體寬度內一次可以顯示多少個完整項目。

投影片貼齊

slide-align (投影片對齊方式)

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

snap (貼齊)

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

動作

next (下一個)

將輪播向前移動計算出的可見投影片數量。

prev (上一個)

將輪播向後移動計算出的可見投影片數量。

goToSlide (前往投影片)

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

活動

slideChange (投影片變更)

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

樣式設定

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

自訂箭頭按鈕

箭頭按鈕可以透過傳入您自己的自訂標記來自訂。例如，您可以使用以下 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-stream-gallery …>
  <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-stream-gallery>

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

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