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