搭配 amp-carousel 的圖片庫
簡介
`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` 來實現。
此範例使用 此處 描述的技巧，以確保圖片永遠不會與標題重疊。一個正面的副作用是圖片尺寸也不需要事先知道。這使其成為具有未知大小/長度的圖片和標題的圖片輪播的非常靈活的方法。
<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 ? '▼' : '▲'">▲</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 ? '▼' : '▲'">▲</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 ? '▼' : '▲'">▲</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，您可能需要將其標記為此型別
<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 上編輯範例-