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

边境牧羊犬是一种工作和牧羊犬品种，在英格兰-苏格兰边境地区培育，用于放牧牲畜，尤其是绵羊。它专门为智力和服从而培育。它们被认为非常聪明，而且通常精力充沛、杂技般、聪明且运动能力强，除了在牧羊犬比赛中取得成功外，它们还经常在犬类运动中取得巨大的成功。它们通常被认为是所有家犬中最聪明的。边境牧羊犬仍然在世界各地从事其传统的放牧牲畜工作。
设得兰牧羊犬，通常被称为喜乐蒂犬，是一种牧羊犬。不太受欢迎的昵称是玩具牧羊犬和迷你牧羊犬。它们是小型犬，有各种颜色，例如貂色、三色和蓝色云斑。它们是非常聪明、爱叫、容易兴奋、精力充沛的犬，总是愿意取悦和努力工作。
霍夫瓦尔特犬是一种中大型德国犬种。该品种的名称意思是“庄园护卫犬”，这是该品种的原始用途。该品种起源于黑森林地区，最早在中世纪的文字和绘画中被描述。 
<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>

元数据

热门新闻轮播图需要以下类型之一的 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 上编辑示例