">文档：<amp-inline-gallery> - amp.dev - AMP 框架
AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

amp-inline-gallery

实验性
Bento

说明

沿水平轴显示多个类似的内容，并带有可选的分页点和缩略图。

 

必需的脚本

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

支持的布局

用法

<amp-inline-gallery> 组件使用 <amp-base-carousel> 显示幻灯片。页面必须在文档头中为这两个组件包含必需的脚本。典型用法可能如下所示

<amp-inline-gallery layout="container">
  <amp-base-carousel
    class="gallery"
    layout="responsive"
    width="3.6"
    height="2"
    snap-align="center"
    loop
    visible-count="1.2"
  >
    <amp-img
      src="/static/inline-examples/images/image1.jpg"
      layout="responsive"
      width="450"
      height="300"
    ></amp-img>
    <amp-img
      src="/static/inline-examples/images/image2.jpg"
      layout="responsive"
      width="450"
      height="300"
    ></amp-img>
    <amp-img
      src="/static/inline-examples/images/image3.jpg"
      layout="responsive"
      width="450"
      height="300"
    ></amp-img>
  </amp-base-carousel>
  <amp-inline-gallery-pagination layout="nodisplay" inset>
  </amp-inline-gallery-pagination>
</amp-inline-gallery>
在游乐场中打开此代码段

上述示例显示了使用 3:2 宽高比的幻灯片，幻灯片两侧各露出 10%。amp-base-carousel 上使用 3.6:2 的宽高比，一次显示 1.2 张幻灯片。

在有效的 AMP 文档外部独立使用

借助 Bento，您可以在非 AMP 页面中使用 AMP 组件，而无需完全遵守有效的 AMP。您可以采用这些组件，并将它们放置在不支持 AMP 的框架和 CMS 中进行实现。在我们的指南 在非 AMP 页面中使用 AMP 组件 中阅读更多内容。

要查找 amp-inline-gallery 的独立版本，请参阅 bento-inline-gallery。

包含分页指示器

<amp-inline-gallery-pagination> 组件确定如何显示分页指示符。默认情况下，不显示分页指示符。

当 amp-base-carousel 中有八张或更少的幻灯片时，分页指示符会呈现为点。对于九张或更多幻灯片，分页指示符会呈现当前幻灯片编号和幻灯片总数，并右对齐。

分页指示符位置默认为在走马灯下方。将 inset 属性添加到 <amp-inline-gallery-pagination> 标记中，将使分页指示符覆盖在走马灯上。要对不同的屏幕尺寸使用不同的样式，请使用 媒体属性

<amp-inline-gallery layout="container">
  <amp-base-carousel>…</amp-base-carousel>
  <amp-inline-gallery-pagination
    media="(max-width: 599px)"
    layout="nodisplay"
    inset
  >
  </amp-inline-gallery-pagination>
  <amp-inline-gallery-pagination
    media="(min-width: 600px)"
    layout="fixed-height"
    height="24"
  >
  </amp-inline-gallery-pagination>
</amp-inline-gallery>
inset（可选）

将分页指示符显示为内嵌，覆盖走马灯本身。使用 inset 时，您应该为 <amp-inline-gallery-pagination> 元素指定 layout="nodisplay"。

对于具有 inset 的 <amp-inline-gallery-pagination> 元素，其默认 CSS 会将其指定为相对于其父元素的 bottom: 0。如果下方有其他元素（例如 <amp-inline-gallery-thumbnails>），则可以覆盖此设置，以便将该元素置于旋转木马之上。

通用属性

<amp-inline-gallery-pagination> 元素包含 通用属性，这些属性已扩展到 AMP 组件。

包含缩略图

除了分页指示符之外，amp-inline-gallery 组件还可以显示缩略图预览，或者仅显示缩略图预览。默认情况下，图库中不会显示任何缩略图。使用缩略图时，请牢记以下最佳做法

  • 避免在幻灯片少于八张时同时使用分页指示符和缩略图。在较小的图库中，指示符点是多余的。
  • 在同时使用分页指示符和缩略图时，请将分页指示符缩进，使其与幻灯片重叠。查看下面的代码示例，了解一个示例。
  • 使用 media 属性可在较小的移动设备上显示分页指示符，而在较大的屏幕上显示缩略图。
  • 通过在幻灯片元素上使用 data-thumbnail-src，可在缩略图中加载较低分辨率的图像。

下面的示例演示了一个在较大分辨率下可见缩略图的图库。

<amp-inline-gallery layout="container">
  <!--
    The amp-layout with layout="container" is used to display the pagination on
    top of the carousel instead of the thumbnails. You can also use a div with
    `position: relative;`
  -->
  <amp-layout layout="container">
    <amp-base-carousel
      class="gallery"
      layout="responsive"
      width="3"
      height="2"
      snap-align="center"
      loop
    >
      <amp-img
        class="slide"
        layout="flex-item"
        src="https://picsum.photos/id/779/600/400"
        srcset="https://picsum.photos/id/779/150/100 150w,
                https://picsum.photos/id/779/600/400 600w,
                https://picsum.photos/id/779/1200/800 1200w"
        data-thumbnail-src="https://picsum.photos/id/779/150/100"
      >
      </amp-img>
      <amp-img
        class="slide"
        layout="flex-item"
        src="https://picsum.photos/id/1048/600/400"
        srcset="https://picsum.photos/id/1048/150/100 150w,
                https://picsum.photos/id/1048/600/400 600w,
                https://picsum.photos/id/1048/1200/800 1200w"
        data-thumbnail-src="https://picsum.photos/id/1048/150/100"
      >
      </amp-img>
      <amp-img
        class="slide"
        layout="flex-item"
        src="https://picsum.photos/id/108/600/400"
        srcset="https://picsum.photos/id/108/150/100 150w,
                https://picsum.photos/id/108/600/400 600w,
                https://picsum.photos/id/108/1200/800 1200w"
        data-thumbnail-src="https://picsum.photos/id/108/150/100"
      >
      </amp-img>
      <amp-img
        class="slide"
        layout="flex-item"
        src="https://picsum.photos/id/130/600/400"
        srcset="https://picsum.photos/id/130/150/100 150w,
                https://picsum.photos/id/130/600/400 600w,
                https://picsum.photos/id/130/1200/800 1200w"
        data-thumbnail-src="https://picsum.photos/id/130/150/100"
      >
      </amp-img>
      <amp-img
        class="slide"
        layout="flex-item"
        src="https://picsum.photos/id/14/600/400"
        srcset="https://picsum.photos/id/14/150/100 150w,
                https://picsum.photos/id/14/600/400 600w,
                https://picsum.photos/id/14/1200/800 1200w"
        data-thumbnail-src="https://picsum.photos/id/14/150/100"
      >
      </amp-img>
      <amp-img
        class="slide"
        layout="flex-item"
        src="https://picsum.photos/id/165/600/400"
        srcset="https://picsum.photos/id/165/150/100 150w,
                https://picsum.photos/id/165/600/400 600w,
                https://picsum.photos/id/165/1200/800 1200w"
        data-thumbnail-src="https://picsum.photos/id/165/150/100"
      >
      </amp-img>
      <amp-img
        class="slide"
        layout="flex-item"
        src="https://picsum.photos/id/179/600/400"
        srcset="https://picsum.photos/id/179/150/100 150w,
                https://picsum.photos/id/179/600/400 600w,
                https://picsum.photos/id/179/1200/800 1200w"
        data-thumbnail-src="https://picsum.photos/id/179/150/100"
      >
      </amp-img>
      <amp-img
        class="slide"
        layout="flex-item"
        src="https://picsum.photos/id/392/600/400"
        srcset="https://picsum.photos/id/392/150/100 150w,
                https://picsum.photos/id/392/600/400 600w,
                https://picsum.photos/id/392/1200/800 1200w"
        data-thumbnail-src="https://picsum.photos/id/392/150/100"
      >
      </amp-img>
      <amp-img
        class="slide"
        layout="flex-item"
        src="https://picsum.photos/id/468/600/400"
        srcset="https://picsum.photos/id/468/150/100 150w,
                https://picsum.photos/id/468/600/400 600w,
                https://picsum.photos/id/468/1200/800 1200w"
        data-thumbnail-src="https://picsum.photos/id/468/150/100"
      >
      </amp-img>
    </amp-base-carousel>
    <!--
        If using fewer than 8 slides, consider adding something
        like media="(max-width: 799px)".
      -->
    <amp-inline-gallery-pagination layout="nodisplay" inset>
    </amp-inline-gallery-pagination>
  </amp-layout>
  <amp-inline-gallery-thumbnails
    media="(min-width: 800px)"
    layout="fixed-height"
    height="96"
  >
  </amp-inline-gallery-thumbnails>
</amp-inline-gallery>
在游乐场中打开此代码段
媒体查询

<amp-inline-gallery-thumbnails> 的属性可以配置为根据 媒体查询 使用不同的选项。

aspect-ratio（可选）

指定宽高比，表示为 width / height。宽高比默认为与 <amp-base-carousel> 中的幻灯片匹配。

loop（可选）

循环缩略图。取值为 "true" 或 "false"。默认为 "false"。

通用属性

<amp-inline-gallery-thumbnails> 元素包含 通用属性，这些属性已扩展到 AMP 组件。

属性

通用属性

此元素包含 通用属性，这些属性已扩展到 AMP 组件。

版本说明

与 0.1 不同，amp-inline-gallery 的实验性 1.0 版本包括以下更改

  • 具有 inset 属性的 amp-inline-gallery-pagination 使用可覆盖的 bottom: 0 为元素定位。
  • amp-inline-gallery-thumbnails 从幻灯片元素（amp-base-carousel 的子元素）获取 data-thumbnail-src，而不是 srcset。
  • amp-inline-gallery-thumbnails 以 width / height 表示的 aspect-ratio，而不是两个单独的属性 aspect-ratio-width 和 aspect-ratio-height。
  • amp-inline-gallery-thumbnails 的 loop 配置默认为 "false"。
需要更多帮助？

你已经读了这篇文档十几次，但它并没有真正涵盖你的所有问题？也许其他人也有同感：在 Stack Overflow 上联系他们。

转到 Stack Overflow
发现了一个 bug 或缺少一个功能？

AMP 项目强烈鼓励你的参与和贡献！我们希望你会成为我们开源社区的持续参与者，但我们也欢迎针对你特别感兴趣的问题进行一次性贡献。

转到 GitHub