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

amp-inline-gallery

 
您現在可以在有效的 AMP 文件之外使用此元件，方法是使用此元件的 Bento 版本。請參閱 Bento 指南以瞭解詳情。

說明

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

 

必要指令碼

<script async custom-element="amp-inline-gallery" src="https://cdn.ampproject.org/v0/amp-inline-gallery-0.1.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"
    lightbox
  >
    <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-inline-gallery-pagination> 元件決定分頁指示器的顯示方式。預設情況下，不會顯示任何分頁指示器。

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

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

<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"。

通用屬性

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

包含縮圖

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

  • 避免在投影片少於八張時同時使用分頁指示器和縮圖。在較小的圖庫中，指示點是多餘的。
  • 同時使用分頁指示器和縮圖時，請將分頁指示器內嵌以覆疊投影片。檢視下方的程式碼範例以查看範例。
  • 使用 media 屬性在較小的行動裝置上顯示分頁指示器，在較大的螢幕上顯示縮圖。
  • 透過使用 srcset 在縮圖中載入較低解析度的圖片。您可以省略 <amp-img> 上的 sizes，系統會根據呈現的寬度自動產生。

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

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

與 aspect-ratio-width 搭配使用時，指定長寬比。長寬比預設為符合 <amp-base-carousel> 中的投影片。

aspect-ratio-width (選填)

與 aspect-ratio-height 搭配使用時，指定長寬比。長寬比預設為符合 <amp-base-carousel> 中的投影片。

loop (選填)

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

通用屬性

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

屬性

通用屬性

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

驗證

請參閱 AMP 驗證器規格中的amp-inline-gallery 規則。

需要更多協助嗎？

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

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

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

前往 GitHub