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

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

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 (選填)

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

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

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

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

前往 GitHub