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

amp-inline-gallery

實驗性
Bento

說明

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

 

必要指令碼

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

支援的版面配置

用法

<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>
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> 的屬性可以設定為根據 媒體查詢 使用不同的選項。

aspect-ratio (選用)

指定縱橫比，表示為 寬度 / 高度。縱橫比預設為符合 <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 採用以 寬度 / 高度 表示的 aspect-ratio，而非兩個個別的屬性 aspect-ratio-width 和 aspect-ratio-height。
  • amp-inline-gallery-thumbnails 的 loop 設定預設為 "false"。
需要更多協助嗎？

您已閱讀本文件十幾次，但它似乎並未涵蓋您的所有問題？也許其他人也有相同感受：請在 Stack Overflow 上與他們交流。

前往 Stack Overflow
發現錯誤或缺少功能？

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

前往 GitHub