amp-base-carousel

1.0 0.1

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

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

用法

一个通用的轮播，用于沿水平轴或垂直轴显示多个相似的内容。

amp-base-carousel 组件的每个直接子项都被视为轮播中的一个项目。这些节点中的每一个也可能具有任意的 HTML 子项。

轮播包含任意数量的项目，以及可选的导航箭头，用于向前或向后移动单个项目。

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

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

Bento 允许你在非 AMP 页面中使用 AMP 组件，而无需完全提交到有效的 AMP。你可以将这些组件放置在不支持 AMP 的框架和 CMS 中进行实现。请阅读我们的指南在非 AMP 页面中使用 AMP 组件，了解更多信息。

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

用户应注意的行为

从右到左的幻灯片更改

<amp-base-carousel> 要求你定义它何时处于从右到左 (rtl) 的上下文中（例如，阿拉伯语、希伯来语页面）。虽然轮播通常可以在没有此项的情况下工作，但可能会有一些错误。你可以通过以下方式让轮播知道它应作为 rtl 运行

<amp-base-carousel dir="rtl" …>
  …
</amp-base-carousel>

如果轮播处于 RTL 上下文中，并且你希望轮播作为 LTR 运行，则可以在轮播上显式设置 dir="ltr"。

幻灯片布局

当不指定 mixed-lengths 时，幻灯片会自动由轮播调整大小。你应该给幻灯片 layout="flex-item"

<amp-base-carousel …>
  <amp-img layout="flex-item" src="…"></amp-img>
</amp-base-carousel>

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

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

可见幻灯片的数量

当使用 visible-slides 响应媒体查询更改可见幻灯片的数量时，你可能需要更改轮播本身的长宽比以匹配新的可见幻灯片数量。例如，如果你想一次显示三个幻灯片，并且长宽比为 1:1，则轮播本身的长宽比应为 3:1。类似地，如果一次显示四个幻灯片，则你将需要 4:1 的长宽比。此外，当更改 visible-slides 时，你可能需要更改 advance-count。

<!-- Using an aspect ratio of 3:2 for the slides in this example. -->
<amp-base-carousel
  layout="responsive"
  width="3"
  height="1"
  heights="(min-width: 600px) calc(100% * 4 * 3 / 2), calc(100% * 3 * 3 / 2)"
  visible-count="(min-width: 600px) 4, 3"
  advance-count="(min-width: 600px) 4, 3"
>
  <amp-img layout="flex-item" src="…"></amp-img>
  …
</amp-base-carousel>

属性

媒体查询

可以配置 <amp-base-carousel> 的属性以基于媒体查询使用不同的选项。

配置选项

可见幻灯片的数量

混合长度

true 或 false，默认为 false。当为 true 时，使用每个幻灯片的现有宽度（或水平时的现有高度）。这允许使用具有不同宽度的幻灯片的轮播。

可见计数

一个数字，默认为 1。确定在给定时间应显示多少个幻灯片。可以使用小数来使额外的幻灯片的一部分可见。当 mixed-length 为 true 时，将忽略此选项。

前进计数

一个数字，默认为 1。确定当使用上一个或下一个箭头前进时，轮播将前进多少个幻灯片。在指定 visible-count 属性时，此项非常有用。

自动前进

自动前进

true 或 false，默认为 false。根据延迟自动将轮播前进到下一个幻灯片。如果用户手动更改幻灯片，则自动前进停止。请注意，如果未启用 loop，则在到达最后一项时，自动前进将向后移动到第一项。

自动前进计数

一个数字，默认为 1。确定自动前进时，轮播将前进多少个幻灯片。在指定 visible-count 属性时，此项非常有用。

自动前进间隔

一个数字，默认为 1000。指定轮播后续自动前进之间的时间量，以毫秒为单位。

自动前进循环

一个数字，默认为 ∞。轮播在停止之前应前进通过幻灯片的次数。

捕捉对齐

捕捉

true 或 false，默认为 true。确定轮播在滚动时是否应捕捉对齐到幻灯片。

捕捉对齐

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

捕捉依据

一个数字，默认为 1。这确定了捕捉的粒度，并且在使用 visible-count 时非常有用。

其他

控件

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

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

幻灯片

一个数字，默认为 0。这决定了轮播中显示的初始幻灯片。这可以与 amp-bind 一起使用来控制当前显示的幻灯片。

循环

true 或 false，省略时默认为 false。当为 true 时，轮播将允许用户从第一项移动回最后一项，反之亦然。要使循环发生，必须至少存在三倍的 visible-count 的幻灯片。

方向

horizontal 或 vertical，默认为 horizontal。当为 horizontal 时，轮播将水平布局，用户可以向左和向右滑动。当为 vertical 时，轮播将垂直布局，用户可以向上和向下滑动。

通用属性

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

操作

下一个

将轮播图向前移动 advance-count 个幻灯片。

上一个

将轮播图向后移动 advance-count 个幻灯片。

跳转到幻灯片

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

活动

幻灯片更改

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

样式

您可以使用 amp-base-carousel 元素选择器来自由设置轮播图的样式。

自定义箭头按钮

可以通过传入您自己的自定义标记来定制箭头按钮。例如，您可以使用以下 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-base-carousel …>
  <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-base-carousel>

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

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

版本说明

与 0.1 不同，实验性的 1.0 版本的 amp-base-carousel 允许通过 "orientation"="horizontal"|"vertical" 属性而不是 "horizontal"="true"|"false" 属性来配置轮播幻灯片的朝向。