目錄

搭配 amp-carousel 的圖片庫
- 簡介設定搭配動態文字大小的標題搭配文字重疊的標題搭配 amp-bind 的可收合圖片標題搭配 amp-bind 連結輪播含預覽的圖片庫含預覽輪播的圖片庫含燈箱效果的圖片庫 Metadata (中繼資料)

網站

搭配 amp-carousel 的圖片庫

檢視示範在 Playground 中開啟

簡介

amp-carousel 元件非常適合用於圖片庫。輪播需要預先指定 height 屬性。如果顯示的圖片和標題大小不一，這可能會很棘手。以下提供兩種方法來解決這個問題。

設定

在標頭中匯入輪播元件。

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

我們將使用 amp-fit-text 元件，讓標題符合可用空間。

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

輪播預覽可以使用 amp-selector 元件實作。

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

我們使用 amp-bind 元件同步輪播狀態。

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

amp-lightbox-gallery 元件可讓我們快速建立燈箱效果圖片庫。

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

搭配動態文字大小的標題

第一個圖片庫使用 amp-fit-text 讓文字符合可用空間。如果標題長度差異不大，這個方法就很有效。

邊境牧羊犬是一種工作犬和牧羊犬品種，在英格蘭和蘇格蘭邊境地區培育出來，用於畜牧，尤其是牧羊。牠們是為了高智商和服從性而特別培育的。邊境牧羊犬被認為非常聰明，而且通常精力充沛、身手矯健、聰明又富運動細胞，除了在牧羊犬比賽中獲得成功之外，牠們也經常在犬類運動比賽中大放異彩。牠們經常被譽為所有家犬中最聰明的犬種。邊境牧羊犬在世界各地仍從事畜牧的傳統工作。

喜樂蒂牧羊犬，通常被稱為喜樂蒂犬，是一種牧羊犬品種。較少人使用的暱稱是玩具牧羊犬和迷你牧羊犬。牠們是小型犬，有各種顏色，如貂色、三色和藍色斑紋。牠們非常聰明、愛叫、容易興奮、精力充沛，而且總是願意取悅主人並努力工作。

霍夫瓦特犬是一種中大型德國犬種。這個品種的名稱意思是「莊園護衛犬」，這也是這個品種最初的用途。該品種起源於黑森林地區，最早在中世紀的文字和繪畫中被描述。

<amp-carousel class="carousel1" layout="responsive" height="450" width="500" type="slides">
  <div class="slide">
    <amp-img src="/static/samples/img/Border_Collie.jpg" layout="responsive" width="500" height="300" alt="Border Collie"></amp-img>
    <amp-fit-text layout="responsive" width="500" height="150"> The Border Collie is a working and herding dog breed developed in the Anglo-Scottish border region for herding livestock, especially sheep. It was specifically bred for intelligence and obedience.  Considered highly intelligent, and typically extremely energetic, acrobatic, smart and athletic, they frequently compete with great success in dog sports, in addition to their success in sheepdog trials. They are often cited as the most intelligent of all domestic dogs. Border Collies also remain employed throughout the world in their traditional work of herding livestock.  </amp-fit-text>
  </div>

  <div class="slide">
    <amp-img src="/static/samples/img/Shetland_Sheepdog.jpg" layout="responsive" width="500" height="340" alt="Shetland Sheepdog"></amp-img>
    <amp-fit-text layout="responsive" width="500" height="110"> The Shetland Sheepdog, often known as the Sheltie, is a breed of herding dog. Less favored nicknames are the Toy Collie and the Miniature Collie. They are small dogs, and come in a variety of colors, such as sable, tri-color, and blue merle. They are very intelligent, vocal, excitable, energetic dogs who are always willing to please and work hard.
    </amp-fit-text>
  </div>

  <div class="slide">
    <amp-img src="/static/samples/img/Hovawart.jpg" layout="responsive" width="500" height="350" alt="Hovawart"></amp-img>
    <amp-fit-text layout="responsive" width="500" height="100">
      The Hovawart is a medium to large size German dog breed. The name of the breed means "an estate
      guard dog", which is the original use for the breed. The breed originated in the Black Forest
      region and was first described in text and paintings in medieval times.
    </amp-fit-text>
  </div>
</amp-carousel>

搭配文字重疊的標題

另一個帶標題的輪播，這次標題會重疊在圖片上。

邊境牧羊犬是一種工作犬和牧羊犬品種，在英格蘭和蘇格蘭邊境地區培育出來，用於畜牧，尤其是牧羊。牠們是為了高智商和服從性而特別培育的。

喜樂蒂牧羊犬，通常被稱為喜樂蒂犬，是一種牧羊犬品種。較少人使用的暱稱是玩具牧羊犬和迷你牧羊犬。牠們是小型犬，有各種顏色，如貂色、三色和藍色斑紋。牠們非常聰明、愛叫、容易興奮、精力充沛，而且總是願意取悅主人並努力工作。

霍夫瓦特犬是一種中大型德國犬種。這個品種的名稱意思是「莊園護衛犬」，這也是這個品種最初的用途。該品種起源於黑森林地區，最早在中世紀的文字和繪畫中被描述。

<amp-carousel class="carousel2" layout="responsive" height="400" width="500" type="slides">
  <div class="slide">
    <amp-img src="/static/samples/img/Border_Collie.jpg" layout="fill" alt="Border Collie"></amp-img>
    <div class="caption">
      The Border Collie is a working and herding dog breed developed in the Anglo-Scottish border region
      for herding livestock, especially sheep. It was specifically bred for intelligence and obedience.
    </div>
  </div>

  <div class="slide">
    <amp-img src="/static/samples/img/Shetland_Sheepdog.jpg" layout="fill" alt="Shetland Sheepdog"></amp-img>
    <div class="caption">
      The Shetland Sheepdog, often known as the Sheltie, is a breed of herding dog. Less favored nicknames
      are the Toy Collie and the Miniature Collie. They are small dogs, and come in a variety of colors,
      such as sable, tri-color, and blue merle. They are very intelligent, vocal, excitable, energetic dogs
      who are always willing to please and work hard.
    </div>
  </div>

  <div class="slide">
    <amp-img src="/static/samples/img/Hovawart.jpg" layout="fill" alt="Hovawart"></amp-img>
    <div class="caption">
      The Hovawart is a medium to large size German dog breed. The name of the breed means "an estate guard
      dog", which is the original use for the breed. The breed originated in the Black Forest region and was
      first described in text and paintings in medieval times.
    </div>
  </div>
</amp-carousel>

搭配 `amp-bind` 的可收合圖片標題

以下是圖片標題的另一種替代方案：可展開的標題。這個概念是先只顯示標題的第一行 (使用 text-overflow: ellipsis;)。當使用者點擊標題時，標題會展開以顯示完整文字。這是透過在點擊標題時使用 amp-bind 切換 CSS 類別 expanded 來完成。

這個範例使用了此處描述的技巧，以確保圖片永遠不會與標題重疊。一個正面的副作用是，圖片尺寸也不需要事先知道。這使其成為圖片輪播的非常彈性方法，適用於尺寸/長度未知的圖片和標題。

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. ▲

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. ▲

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. ▲

<amp-carousel class="collapsible-captions" height="332" layout="fixed-height" type="slides">
  <figure>
    <div class="fixed-height-container">
      <amp-img layout="fill" src="https://unsplash.it/500/400"></amp-img>
    </div>
    <figcaption on="tap:AMP.setState({expanded: !expanded})" tabindex="0" role="button" [class]="expanded ? 'expanded' : ''">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
      <span [text]="expanded ? '&#9660;' : '&#9650;'">&#9650;</span>
    </figcaption>
  </figure>
  <figure>
    <div class="fixed-height-container">
      <amp-img layout="fill" src="https://unsplash.it/500/500"></amp-img>
    </div>
    <figcaption on="tap:AMP.setState({expanded: !expanded})" tabindex="0" role="button" [class]="expanded ? 'expanded' : ''">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
      <span [text]="expanded ? '&#9660;' : '&#9650;'">&#9650;</span></figcaption>
  </figure>
  <figure>
    <div class="fixed-height-container">
      <amp-img layout="fill" src="https://unsplash.it/200/500"></amp-img>
    </div>
    <figcaption on="tap:AMP.setState({expanded: !expanded})" tabindex="0" role="button" [class]="expanded ? 'expanded' : ''">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
      <span [text]="expanded ? '&#9660;' : '&#9650;'">&#9650;</span></figcaption>
  </figure>
</amp-carousel>

搭配 `amp-bind` 連結輪播

透過 amp-bind，可以跨多個 amp-carousels 連結輪播狀態。每當輪播滑動切換時，它就會更新 selectedSlide。這會導致輪播上方的 <p> 標籤中的 text 屬性也隨之更新。

使用 amp-bind 時，僅允許使用許可清單中的函式。我們在 selectedSlide 之前使用一元加號運算子，將其轉換為整數。

選取的滑動：1/3

<p>Selected slide: <span [text]="+selectedSlide + 1">1</span>/3</p>

<amp-carousel controls type="slides" width="400" height="300" [slide]="selectedSlide" on="slideChange:AMP.setState({ selectedSlide: event.index })">
  <amp-img src="/static/samples/img/image1.jpg" layout="fill"></amp-img>
  <amp-img src="/static/samples/img/image2.jpg" layout="fill"></amp-img>
  <amp-img src="/static/samples/img/image3.jpg" layout="fill"></amp-img>
</amp-carousel>

含預覽的圖片庫

您可以使用輕觸動作 on="tap:my-carousel.goToSlide(index=0)" 在輪播中顯示特定滑動。滑動會依輪播 ID 和索引 (從 0 開始) 識別。

<amp-selector id="carouselWithPreviewSelector" class="carousel-preview" on="select:carouselWithPreview.goToSlide(index=event.targetOption)" layout="container">
  <amp-img option="0" selected src="https://unsplash.it/60/40?image=10" width="60" height="40" alt="a sample image"></amp-img>
  <amp-img option="1" src="https://unsplash.it/60/40?image=11" width="60" height="40" alt="a sample image"></amp-img>
  <amp-img option="2" src="https://unsplash.it/60/40?image=12" width="60" height="40" alt="a sample image"></amp-img>
  <amp-img option="3" src="https://unsplash.it/60/40?image=13" width="60" height="40" alt="a sample image"></amp-img>
</amp-selector>
<amp-carousel id="carouselWithPreview" width="400" height="300" layout="responsive" type="slides" on="slideChange:carouselWithPreviewSelector.toggle(index=event.index, value=true)">
  <amp-img src="https://unsplash.it/400/300?image=10" layout="fill" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=11" layout="fill" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=12" layout="fill" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=13" layout="fill" alt="a sample image"></amp-img>
</amp-carousel>

含預覽輪播的圖片庫

如果輪播包含大量圖片，您甚至可以使用第二個輪播作為預覽 (請務必為第二個輪播使用 type=carousel)。兩個輪播都使用 goToSlide 動作同步選取的元素。

<amp-selector id="carouselSelector" on="select:carousel.goToSlide(index=event.targetOption)" layout="container">
  <amp-carousel id="carouselPreview" class="carousel-preview" height="72" layout="fixed-height" type="carousel">
    <amp-img option="0" selected src="https://unsplash.it/60/40?image=10" width="60" height="40" alt="a sample image"></amp-img>
    <amp-img option="1" src="https://unsplash.it/60/40?image=11" width="60" height="40" alt="a sample image"></amp-img>
    <amp-img option="2" src="https://unsplash.it/60/40?image=12" width="60" height="40" alt="a sample image"></amp-img>
    <amp-img option="3" src="https://unsplash.it/60/40?image=13" width="60" height="40" alt="a sample image"></amp-img>
    <amp-img option="4" src="https://unsplash.it/60/40?image=14" width="60" height="40" alt="a sample image"></amp-img>
    <amp-img option="5" src="https://unsplash.it/60/40?image=15" width="60" height="40" alt="a sample image"></amp-img>
    <amp-img option="6" src="https://unsplash.it/60/40?image=16" width="60" height="40" alt="a sample image"></amp-img>
    <amp-img option="7" src="https://unsplash.it/60/40?image=17" width="60" height="40" alt="a sample image"></amp-img>
    <amp-img option="8" src="https://unsplash.it/60/40?image=18" width="60" height="40" alt="a sample image"></amp-img>
    <amp-img option="9" src="https://unsplash.it/60/40?image=19" width="60" height="40" alt="a sample image"></amp-img>
    <amp-img option="10" src="https://unsplash.it/60/40?image=110" width="60" height="40" alt="a sample image"></amp-img>
    <amp-img option="11" src="https://unsplash.it/60/40?image=111" width="60" height="40" alt="a sample image"></amp-img>
    <amp-img option="12" src="https://unsplash.it/60/40?image=112" width="60" height="40" alt="a sample image"></amp-img>
    <amp-img option="13" src="https://unsplash.it/60/40?image=113" width="60" height="40" alt="a sample image"></amp-img>
    <amp-img option="14" src="https://unsplash.it/60/40?image=114" width="60" height="40" alt="a sample image"></amp-img>
    <amp-img option="15" src="https://unsplash.it/60/40?image=115" width="60" height="40" alt="a sample image"></amp-img>
    <amp-img option="16" src="https://unsplash.it/60/40?image=116" width="60" height="40" alt="a sample image"></amp-img>
    <amp-img option="17" src="https://unsplash.it/60/40?image=117" width="60" height="40" alt="a sample image"></amp-img>
  </amp-carousel>
</amp-selector>
<amp-carousel id="carousel" width="400" height="300" layout="responsive" type="slides" on="slideChange:
          carouselSelector.toggle(index=event.index, value=true),
          carouselPreview.goToSlide(index=event.index)
  ">
  <amp-img src="https://unsplash.it/400/300?image=10" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=11" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=12" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=13" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=14" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=15" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=16" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=17" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=18" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=19" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=110" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=111" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=112" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=113" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=114" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=115" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=116" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=117" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
</amp-carousel>

您可以使用 amp-lightbox-gallery 將圖片庫連結到燈箱效果，以便

當使用者輕觸圖片 N 時，他會進入燈箱模式
使用者可以在燈箱模式內在圖片之間滑動
當使用者離開燈箱模式時，輪播會指向燈箱效果中最後看到的圖片

<amp-carousel id="carousel-with-lightbox" width="400" height="300" layout="responsive" type="slides" lightbox>
  <amp-img src="https://unsplash.it/400/300?image=10" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=11" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=12" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=13" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
</amp-carousel>

Metadata (中繼資料)

熱門新聞輪播版位需要下列其中一種 schema.org 標記：Article、NewsArticle、BlogPosting 或 VideoObject。如果您的圖片庫也是 NewsArticle，您可能會想要將其標記為 NewsArticle

<script type="application/ld+json">
[
  {
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    ...
  },
  {
    "@context": "http://schema.org",
    "@type": "ImageGallery",
    "associatedMedia": [
      {
        "@context": "http://schema.org",
        "@type": "ImageObject",
        "contentUrl": "https://unsplash.it/60/40?image=1",
        "caption": "A cute pup"
      },
      {,
        "@context": "http://schema.org",
        "@type": "ImageObject",
        "contentUrl": "https://unsplash.it/60/40?image=2",
        "caption": "A doubly cute pup"
      },
    ],
  }
]
</script>

需要進一步說明嗎？

如果本頁的說明沒有涵蓋您的所有問題，歡迎隨時與其他 AMP 使用者聯絡，討論您的確切用途。

前往 Stack Overflow

有無法解釋的功能？

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

在 GitHub 上編輯範例

作者： @sebastianbenz