amp-stream-gallery

1.0 0.1

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

<script async custom-element="amp-stream-gallery" src="https://cdn.ampproject.org/v0/amp-stream-gallery-1.0.js"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-stream-gallery-1.0.css">

用法

一个流媒体画廊，用于沿着水平轴一次显示多条类似内容。要实现更定制的 UX，请参阅 amp-base-carousel。

示例

在以下示例中，我们使用 amp-stream-gallery 在响应式容器中显示其内容，根据视口大小一次显示不同数量的子项。

<amp-stream-gallery width="7.5" height="2" layout="responsive">
  <amp-img src="img1.png" layout="flex-item"></amp-img>
  <amp-img src="img2.png" layout="flex-item"></amp-img>
  <amp-img src="img3.png" layout="flex-item"></amp-img>
  <amp-img src="img4.png" layout="flex-item"></amp-img>
  <amp-img src="img5.png" layout="flex-item"></amp-img>
  <amp-img src="img6.png" layout="flex-item"></amp-img>
  <amp-img src="img7.png" layout="flex-item"></amp-img>
</amp-stream-gallery>

amp-stream-gallery 组件的每个直接子项都被视为画廊中的一个项目。这些节点中的每一个也可能具有任意 HTML 子项。

画廊由任意数量的项目组成，以及可选的导航箭头，用于向前或向后移动给定数量的项目。

如果用户滑动或使用可自定义的箭头按钮，画廊将在项目之间前进。

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

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

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

用户应注意的行为

幻灯片布局

幻灯片由轮播自动调整大小。您应该给幻灯片 layout="flex-item"

<amp-stream-gallery …>
  <amp-img layout="flex-item" src="…"></amp-img>
</amp-stream-gallery>

当轮播水平布局时，幻灯片的默认高度为 100%。这可以通过 CSS 或使用 layout="fixed-height" 轻松更改。指定高度时，幻灯片将在轮播中垂直居中。

如果您想水平居中幻灯片内容，您将需要创建一个包装元素，并使用它来居中内容。

属性

媒体查询

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

行为

控件

"always"、"auto" 或 "never" 之一，默认为 "auto"。这决定了是否以及何时显示上一个/下一个导航箭头。注意：当 outset-arrows 为 true 时，箭头显示为 "always"。

• always：始终显示箭头。
• auto：当轮播最近通过鼠标收到交互时显示箭头，当轮播最近通过触摸收到交互时不显示箭头。在触摸设备的首次加载时，箭头显示，直到首次交互。
• never：从不显示箭头。

额外空间

"around" 或未定义之一。这决定了在轮播中显示计算出的可见幻灯片数量后如何分配额外的空间。如果为 "around"，则空白空间在轮播周围均匀分布，其中 justify-content: center；否则，空间分配给 LTR 文档的右侧，分配给 RTL 文档的左侧。

循环

true 或 false 之一，默认为 true。为 true 时，轮播将允许用户从第一项返回到最后一项，反之亦然。必须至少有三个幻灯片才能进行循环。

外置箭头

true 或 false 之一，默认为 false。为 true 时，轮播将在幻灯片的任一侧显示其箭头并突出显示。请注意，对于突出显示的箭头，幻灯片容器的有效长度将比其给定容器分配的空间少 100px - 每侧每个箭头 50px。为 false 时，轮播将在幻灯片的左右边缘上显示其箭头并覆盖在幻灯片上。

窥视

一个数字，默认为0。这决定了在当前幻灯片的一侧或两侧显示多少额外的幻灯片（作为一种提示，向用户表明轮播是可以滑动的）。

通用属性

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

画廊幻灯片可见性

最小可见数量

一个数字，默认为1。决定了在给定时间应该显示的幻灯片的最小数量。可以使用分数来使部分额外的幻灯片可见。

最大可见数量

一个数字，默认为Number.MAX_VALUE。决定了在给定时间应该显示的幻灯片的最大数量。可以使用分数来使部分额外的幻灯片可见。

最小项目宽度

一个数字，默认为1。决定了每个项目的最小宽度，用于确定在画廊的整体宽度内一次可以显示多少个完整项目。

最大项目宽度

一个数字，默认为Number.MAX_VALUE。决定了每个项目的最大宽度，用于确定在画廊的整体宽度内一次可以显示多少个完整项目。

幻灯片捕捉

幻灯片对齐

start 或 center。当开始对齐时，幻灯片的开始（例如，水平对齐时的左边缘）与轮播的开始对齐。当居中对齐时，幻灯片的中心与轮播的中心对齐。

捕捉

true 或 false，默认为 true。决定了在滚动时轮播是否应该在幻灯片上捕捉。

操作

下一个

将轮播向前移动计算出的可见幻灯片数量。

上一个

将轮播向后移动计算出的可见幻灯片数量。

转到幻灯片

将轮播移动到index 参数指定的幻灯片。

活动

幻灯片更改

当轮播显示的索引发生变化时，会触发此事件。可以通过 event.index 获得新索引。

样式

你可以使用 amp-stream-gallery 元素选择器自由设置轮播样式。

自定义箭头按钮

可以通过传入你自己的自定义标记来自定义箭头按钮。例如，你可以使用以下 HTML 和 CSS 重新创建默认样式

.carousel-prev,
.carousel-next {
  filter: drop-shadow(0px 1px 2px #4a4a4a);
  width: 40px;
  height: 40px;
  padding: 20px;
  background-color: transparent;
  border: none;
  outline: none;
}

.carousel-prev {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path  d="M14,7.4 L9.4,12 L14,16.6" fill="none" stroke="#fff" stroke-width="2px" stroke-linejoin="round" stroke-linecap="round" /></svg>');
}

.carousel-next {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path  d="M10,7.4 L14.6,12 L10,16.6" fill="none" stroke="#fff" stroke-width="2px" stroke-linejoin="round" stroke-linecap="round" /></svg>');
}

<amp-stream-gallery …>
  <div>first slide</div>
  …
  <button slot="next-arrow" class="carousel-next" aria-label="Next"></button>
  <button
    slot="prev-arrow"
    class="carousel-prev"
    aria-label="Previous"
  ></button>
</amp-stream-gallery>

如果你希望对箭头按钮进行更多自定义，可以使用 next 和 prev 操作。例如，如果你希望将按钮放在轮播下方，并使用“上一个”和“下一个”字样，而不是将其放在默认位置，可以使用以下 HTML

  <amp-stream-gallery id="carousel-1" …>
    …
    <div slot="next-arrow"></div>
    <div slot="prev-arrow"></div>
  </amp-stream-gallery>
  <button on="tap:carousel-1.prev()">Previous</button>
  <button on="tap:carousel-1.next()">Next</button>