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

使用 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 使文本适应可用空间。如果标题长度变化不大，这将非常有效。

边境牧羊犬是一种工作和放牧犬品种，在英格兰和苏格兰边境地区发展起来，用于放牧牲畜，特别是绵羊。它专门为智力和服从而培育。它们被认为是高度聪明，通常精力充沛、灵活、聪明且运动能力强，除了在牧羊犬试验中取得成功外，还经常在犬类运动中取得巨大成功。它们通常被认为是所有家犬中最聪明的。边境牧羊犬在全球范围内仍然被用于放牧牲畜的传统工作。
设得兰群岛牧羊犬，通常被称为 Sheltie，是一种放牧犬品种。不太受欢迎的昵称是玩具牧羊犬和迷你牧羊犬。它们是小型犬，有多种颜色，如貂色、三色和蓝色云石色。它们是非常聪明、爱叫、易兴奋、精力充沛的犬，它们总是乐于取悦和努力工作。
霍夫瓦尔特是一种中大型德国犬品种。该品种的名称意思是“庄园守卫犬”，这是该品种的最初用途。该品种起源于黑森林地区，在中世纪的文字和绘画中首次被描述。 
<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>

带有文本覆盖的标题

另一个带有标题的轮播，这次标题覆盖在图片上。

边境牧羊犬是一种工作和放牧犬品种，在英格兰和苏格兰边境地区发展起来，用于放牧牲畜，特别是绵羊。它专门为智力和服从而培育。
设得兰群岛牧羊犬，通常被称为 Sheltie，是一种放牧犬品种。不太受欢迎的昵称是玩具牧羊犬和迷你牧羊犬。它们是小型犬，有多种颜色，如貂色、三色和蓝色云石色。它们是非常聪明、爱叫、易兴奋、精力充沛的犬，它们总是乐于取悦和努力工作。
霍夫瓦尔特是一种中大型德国犬品种。该品种的名称意思是“庄园守卫犬”，这是该品种的最初用途。该品种起源于黑森林地区，在中世纪的文字和绘画中首次被描述。
 
<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>

元数据

热门故事轮播需要 schema.org 标记，用于以下类型之一：文章、新闻文章、博客文章或视频对象。如果您的图片画廊也是一篇新闻文章，您可能需要将其标记为新闻文章

<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 上编辑示例