重要事項：本文件不適用於您目前選取的格式 電子郵件！

amp-inline-gallery

實驗性功能

Bento

說明

沿水平軸顯示多個相似的內容片段，可選擇性的加上分頁點和縮圖。

必要指令碼

AMP Bento (獨立)

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

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

支援的版面配置

容器

用法

<amp-inline-gallery> 元件使用 <amp-base-carousel> 來顯示投影片。頁面必須在文件標頭中包含這兩個元件的必要指令碼。典型的用法可能如下所示

<amp-inline-gallery layout="container">
  <amp-base-carousel
    class="gallery"
    layout="responsive"
    width="3.6"
    height="2"
    snap-align="center"
    loop
    visible-count="1.2"
  >
    <amp-img
      src="/static/inline-examples/images/image1.jpg"
      layout="responsive"
      width="450"
      height="300"
    ></amp-img>
    <amp-img
      src="/static/inline-examples/images/image2.jpg"
      layout="responsive"
      width="450"
      height="300"
    ></amp-img>
    <amp-img
      src="/static/inline-examples/images/image3.jpg"
      layout="responsive"
      width="450"
      height="300"
    ></amp-img>
  </amp-base-carousel>
  <amp-inline-gallery-pagination layout="nodisplay" inset>
  </amp-inline-gallery-pagination>
</amp-inline-gallery>

在 Playground 中開啟此程式碼片段

以上範例顯示使用 3:2 縱橫比的投影片，兩側各露出 10% 的投影片。amp-base-carousel 上使用 3.6:2 的縱橫比，一次顯示 1.2 張投影片。

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

Bento 允許您在非 AMP 頁面中使用 AMP 元件，而無需完全提交到有效的 AMP。您可以將這些元件放置在使用不支援 AMP 的框架和 CMS 的實作中。請參閱我們的指南在非 AMP 頁面中使用 AMP 元件以了解更多資訊。

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

包含分頁指示器

<amp-inline-gallery-pagination> 元件決定分頁指示器的顯示方式。預設情況下，不顯示分頁指示器。

當 amp-base-carousel 中有八張或更少投影片時，分頁指示器會呈現為點。對於九張或更多投影片，分頁指示器會呈現目前的投影片編號和投影片總數，並靠右對齊。

分頁指示器的位置預設在輪播滑塊下方。將 inset 屬性新增至 <amp-inline-gallery-pagination> 標記，會將分頁指示器覆蓋在輪播滑塊上。若要針對不同的螢幕尺寸使用不同的樣式，請使用 media 屬性

<amp-inline-gallery layout="container">
  <amp-base-carousel>…</amp-base-carousel>
  <amp-inline-gallery-pagination
    media="(max-width: 599px)"
    layout="nodisplay"
    inset
  >
  </amp-inline-gallery-pagination>
  <amp-inline-gallery-pagination
    media="(min-width: 600px)"
    layout="fixed-height"
    height="24"
  >
  </amp-inline-gallery-pagination>
</amp-inline-gallery>

`amp-inline-gallery-pagination` 屬性

`inset` (選填)

將分頁指示器顯示為內嵌，覆蓋在輪播滑塊本身之上。使用 inset 時，您應該為 <amp-inline-gallery-pagination> 元素提供 layout="nodisplay"。

具有 inset 的 <amp-inline-gallery-pagination> 元素的預設 CSS 將其指定在其父元素 bottom: 0 的位置。如果下方有其他元素 (例如 <amp-inline-gallery-thumbnails>)，您可以覆寫此設定，將元素放置在輪播滑塊上方。

通用屬性

<amp-inline-gallery-pagination> 元素包含通用屬性，這些屬性已延伸至 AMP 元件。

包含縮圖

除了分頁指示器之外，或取代分頁指示器，amp-inline-gallery 元件還可以顯示縮圖預覽。預設情況下，圖庫中不顯示縮圖。使用縮圖時，請記住以下最佳做法

避免在投影片少於八張時同時使用分頁指示器和縮圖。在較小的圖庫中，指示點是多餘的。
當同時使用分頁指示器和縮圖時，請將分頁指示器內嵌以覆蓋投影片。檢視以下程式碼範例以查看範例。
使用 media 屬性在較小的行動裝置上顯示分頁指示器，在較大的螢幕上顯示縮圖。
透過在投影片元素上使用 data-thumbnail-src，在縮圖中載入較低解析度的圖片。

以下範例示範在較大解析度下可見縮圖的圖庫。

<amp-inline-gallery layout="container">
  <!--
    The amp-layout with layout="container" is used to display the pagination on
    top of the carousel instead of the thumbnails. You can also use a div with
    `position: relative;`
  -->
  <amp-layout layout="container">
    <amp-base-carousel
      class="gallery"
      layout="responsive"
      width="3"
      height="2"
      snap-align="center"
      loop
    >
      <amp-img
        class="slide"
        layout="flex-item"
        src="https://picsum.photos/id/779/600/400"
        srcset="https://picsum.photos/id/779/150/100 150w,
                https://picsum.photos/id/779/600/400 600w,
                https://picsum.photos/id/779/1200/800 1200w"
        data-thumbnail-src="https://picsum.photos/id/779/150/100"
      >
      </amp-img>
      <amp-img
        class="slide"
        layout="flex-item"
        src="https://picsum.photos/id/1048/600/400"
        srcset="https://picsum.photos/id/1048/150/100 150w,
                https://picsum.photos/id/1048/600/400 600w,
                https://picsum.photos/id/1048/1200/800 1200w"
        data-thumbnail-src="https://picsum.photos/id/1048/150/100"
      >
      </amp-img>
      <amp-img
        class="slide"
        layout="flex-item"
        src="https://picsum.photos/id/108/600/400"
        srcset="https://picsum.photos/id/108/150/100 150w,
                https://picsum.photos/id/108/600/400 600w,
                https://picsum.photos/id/108/1200/800 1200w"
        data-thumbnail-src="https://picsum.photos/id/108/150/100"
      >
      </amp-img>
      <amp-img
        class="slide"
        layout="flex-item"
        src="https://picsum.photos/id/130/600/400"
        srcset="https://picsum.photos/id/130/150/100 150w,
                https://picsum.photos/id/130/600/400 600w,
                https://picsum.photos/id/130/1200/800 1200w"
        data-thumbnail-src="https://picsum.photos/id/130/150/100"
      >
      </amp-img>
      <amp-img
        class="slide"
        layout="flex-item"
        src="https://picsum.photos/id/14/600/400"
        srcset="https://picsum.photos/id/14/150/100 150w,
                https://picsum.photos/id/14/600/400 600w,
                https://picsum.photos/id/14/1200/800 1200w"
        data-thumbnail-src="https://picsum.photos/id/14/150/100"
      >
      </amp-img>
      <amp-img
        class="slide"
        layout="flex-item"
        src="https://picsum.photos/id/165/600/400"
        srcset="https://picsum.photos/id/165/150/100 150w,
                https://picsum.photos/id/165/600/400 600w,
                https://picsum.photos/id/165/1200/800 1200w"
        data-thumbnail-src="https://picsum.photos/id/165/150/100"
      >
      </amp-img>
      <amp-img
        class="slide"
        layout="flex-item"
        src="https://picsum.photos/id/179/600/400"
        srcset="https://picsum.photos/id/179/150/100 150w,
                https://picsum.photos/id/179/600/400 600w,
                https://picsum.photos/id/179/1200/800 1200w"
        data-thumbnail-src="https://picsum.photos/id/179/150/100"
      >
      </amp-img>
      <amp-img
        class="slide"
        layout="flex-item"
        src="https://picsum.photos/id/392/600/400"
        srcset="https://picsum.photos/id/392/150/100 150w,
                https://picsum.photos/id/392/600/400 600w,
                https://picsum.photos/id/392/1200/800 1200w"
        data-thumbnail-src="https://picsum.photos/id/392/150/100"
      >
      </amp-img>
      <amp-img
        class="slide"
        layout="flex-item"
        src="https://picsum.photos/id/468/600/400"
        srcset="https://picsum.photos/id/468/150/100 150w,
                https://picsum.photos/id/468/600/400 600w,
                https://picsum.photos/id/468/1200/800 1200w"
        data-thumbnail-src="https://picsum.photos/id/468/150/100"
      >
      </amp-img>
    </amp-base-carousel>
    <!--
        If using fewer than 8 slides, consider adding something
        like media="(max-width: 799px)".
      -->
    <amp-inline-gallery-pagination layout="nodisplay" inset>
    </amp-inline-gallery-pagination>
  </amp-layout>
  <amp-inline-gallery-thumbnails
    media="(min-width: 800px)"
    layout="fixed-height"
    height="96"
  >
  </amp-inline-gallery-thumbnails>
</amp-inline-gallery>

在 Playground 中開啟此程式碼片段

`amp-inline-gallery-thumbnails` 屬性

媒體查詢

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

`aspect-ratio` (選填)

指定縱橫比，表示為 width / height。縱橫比預設為符合 <amp-base-carousel> 中的投影片。

`loop` (選填)

循環顯示縮圖。採用 "true" 或 "false" 的值。預設為 "false"。

通用屬性

<amp-inline-gallery-thumbnails> 元素包含通用屬性，這些屬性已延伸至 AMP 元件。

屬性

通用屬性

此元素包含通用屬性，這些屬性已延伸至 AMP 元件。

版本注意事項

與 0.1 不同，實驗性 1.0 版本的 amp-inline-gallery 包含以下變更

具有 inset 屬性的 amp-inline-gallery-pagination 將元素放置在可覆寫的 bottom: 0 位置。
amp-inline-gallery-thumbnails 從投影片元素 (amp-base-carousel 的子項) 取得 data-thumbnail-src，而不是 srcset。
amp-inline-gallery-thumbnails 採用以 width / height 表示的 aspect-ratio，而不是兩個獨立的屬性 aspect-ratio-width 和 aspect-ratio-height。
amp-inline-gallery-thumbnails 的 loop 設定預設為 "false"。

需要更多協助嗎？

您已閱讀本文件十幾次，但它仍然沒有真正涵蓋您的所有問題嗎？也許其他人也有同樣的感受：在 Stack Overflow 上與他們聯繫。

前往 Stack Overflow

發現錯誤或缺少功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎針對您特別熱衷的問題提供一次性的貢獻。

前往 GitHub

amp-inline-gallery 1.0 0.1

說明

必要指令碼

支援的版面配置

用法

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

包含分頁指示器

amp-inline-gallery-pagination 屬性

inset (選填)

通用屬性

包含縮圖

amp-inline-gallery-thumbnails 屬性

媒體查詢

aspect-ratio (選填)

loop (選填)

通用屬性

屬性

通用屬性

版本注意事項

amp-inline-gallery

`amp-inline-gallery-pagination` 屬性

`inset` (選填)

`amp-inline-gallery-thumbnails` 屬性

`aspect-ratio` (選填)

`loop` (選填)