amp-carousel

描述

在水平轴上显示多个类似的内容片段。

必需脚本

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

支持的布局

填充固定固定高度 flex-item 固有不显示响应式

示例

amp-carousel amp-lightbox-gallery AMP 电子商务入门产品浏览页面产品页面使用 amp-carousel 制作图片库使用 amp-carousel 制作视频轮播新闻文章食谱如何支持尺寸未知的图片滚动绑定效果基础 amp-analytics 住房

一种通用轮播，用于沿水平轴显示多个相似的内容片段；旨在高度灵活且高性能。

行为

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

轮播由任意数量的项目组成，以及可选的导航箭头，用于向前或向后移动。对于 type="slides"，箭头一次移动一个项目。对于 type="carousel"，箭头一次向前或向后移动一个轮播的宽度。

如果用户滑动或单击可选的导航箭头，则轮播会在项目之间前进。

<amp-carousel
  width="450"
  height="300"
  layout="responsive"
  type="slides"
  role="region"
  aria-label="Basic carousel"
>
  <amp-img
    src="/static/inline-examples/images/image1.jpg"
    width="450"
    height="300"
  ></amp-img>
  <amp-img
    src="/static/inline-examples/images/image2.jpg"
    width="450"
    height="300"
  ></amp-img>
  <amp-img
    src="/static/inline-examples/images/image3.jpg"
    width="450"
    height="300"
  ></amp-img>
</amp-carousel>

在游乐场中打开此代码段

前进到特定幻灯片

为元素上的 on 属性设置方法 tap:carousel-id.goToSlide(index=N) 将在用户点击或单击时，将具有“carousel-id”ID 的轮播推进到 index=N 处的幻灯片（第一张幻灯片位于 index=0，第二张幻灯片位于 index=1，依此类推）。

在以下示例中，我们有一个包含三张图片的轮播，轮播下方有预览按钮。当用户单击其中一个按钮时，将显示相应的轮播项目。

<amp-carousel
  id="carousel-with-preview"
  width="450"
  height="300"
  layout="responsive"
  type="slides"
  role="region"
  aria-label="Carousel with slide previews"
>
  <amp-img
    src="/static/inline-examples/images/image1.jpg"
    width="450"
    height="300"
    layout="responsive"
    alt="apples"
  ></amp-img>
  <amp-img
    src="/static/inline-examples/images/image2.jpg"
    width="450"
    height="300"
    layout="responsive"
    alt="lemons"
  ></amp-img>
  <amp-img
    src="/static/inline-examples/images/image3.jpg"
    width="450"
    height="300"
    layout="responsive"
    alt="blueberries"
  ></amp-img>
</amp-carousel>
<div class="carousel-preview">
  <button on="tap:carousel-with-preview.goToSlide(index=0)">
    <amp-img
      src="/static/inline-examples/images/image1.jpg"
      width="60"
      height="40"
      alt="apples"
    ></amp-img>
  </button>
  <button on="tap:carousel-with-preview.goToSlide(index=1)">
    <amp-img
      src="/static/inline-examples/images/image2.jpg"
      width="60"
      height="40"
      alt="lemons"
    ></amp-img>
  </button>
  <button on="tap:carousel-with-preview.goToSlide(index=2)">
    <amp-img
      src="/static/inline-examples/images/image3.jpg"
      width="60"
      height="40"
      alt="blueberries"
    ></amp-img>
  </button>
</div>

在游乐场中打开此代码段

`amp-carousel` 的辅助功能注意事项

自动播放，尤其是无限循环的轮播，对于用户来说可能会非常分散注意力和令人困惑，尤其是对于认知障碍的用户。通常，我们建议避免自动播放轮播。虽然自动播放轮播在用户与轮播互动后会停止，但请考虑添加一个明确的“播放/暂停”控件。

默认情况下，<amp-carousel> 在呈现时被编程识别为列表（在容器元素上使用 role="list"，在每个项目上使用 role="listitem"）。但是，对于 <amp-carousel type="slides">，目前未提供特定的 role。因此，当辅助技术用户在页面中阅读/导航时，当他们到达轮播时，这不会很明显。我们建议在 <amp-carousel> 中包含一个明确的 role="region" 和一个描述性的 aria-label（一个通用的 aria-label="Carousel" 或一个更具描述性的标签，例如 aria-label="Latest news items"）。

目前，<amp-carousel type="slides"> 轮播被声明为 ARIA 实时区域（使用 aria-live="polite"），这意味着每次显示新幻灯片时，辅助技术（例如屏幕阅读器）都会播报幻灯片的全部内容。由于轮播的初始呈现方式，这还可能导致在加载页面时播报轮播的全部内容。这也意味着包含 autoplay 轮播的页面将在幻灯片自动前进时不断播报。目前没有解决此问题的办法。

属性

类型	指定轮播项目的显示类型，可以是 `carousel`（默认）：显示所有幻灯片，并可水平滚动。此类型仅支持以下布局：`fixed`、`fixed-height` 和 `nodisplay`。 `slides`：一次显示一张幻灯片。此类型支持以下布局：`fill`、`fixed`、`fixed-height`、`flex-item`、`nodisplay` 和 `responsive`。
高度（必需）	以像素为单位指定轮播的高度。
控件（可选）	永久显示左右箭头，以便用户在移动设备上浏览轮播项目。默认情况下，导航箭头在移动设备上几秒钟后消失。还可以通过样式控制箭头的可见性，并且可以使用媒体查询仅在特定屏幕宽度下显示箭头。在台式机上，除非仅存在一个子项，否则始终显示箭头。
data-next-button-aria-label（可选）	设置 `amp-carousel-button-next` 的 aria-label。如果未给出值，则 aria-label 默认为“轮播中的下一项”。
data-prev-button-aria-label（可选）	设置 `amp-carousel-button-prev` 的 aria-label。如果未给出值，则 aria-label 默认为“轮播中的上一项”。
data-button-count-format（可选）	格式字符串类似于 `(%s of %s)`，用作 `amp-carousel-button-next`/`amp-carousel-button-prev` 的 aria-label 的后缀。这为使用屏幕阅读器浏览轮播的用户提供进度信息。如果未给出值，则默认为“(%s of %s)”。
自动播放（可选）	定期切换到下一张幻灯片，无需用户交互。如果用户手动更改幻灯片，则停止自动播放。如果存在但没有值默认情况下，每隔 5000 毫秒（5 秒）切换一张幻灯片；这可以通过 `delay` 属性覆盖。如果 `loop` 不存在，则将 `loop` 属性附加到 `amp-carousel`。自动播放至少需要 2 张幻灯片。仅适用于 `type=slides` 的轮播。如果存在且有值如果 `loop` 不存在，则将 `loop` 属性附加到 `amp-carousel`。在完成所需次数的循环后，移除 `loop` 属性。
延迟（可选）	启用 `autoplay` 时，指定切换到下一张幻灯片的延迟时间（以毫秒为单位）。请注意，`delay` 的最小允许值为 1000 毫秒。`delay` 属性仅适用于 `type=slides` 的轮播。
循环（可选）	允许用户跳过第一项或最后一项。必须至少有 3 张幻灯片才能进行循环。`loop` 属性仅适用于具有 `type=slides` 的轮播。示例：显示带有控件、循环和延迟自动播放的幻灯片轮播 <amp-carousel type="slides" width="450" height="300" controls loop autoplay delay="3000" data-next-button-aria-label="Go to next slide" data-previous-button-aria-label="Go to previous slide" role="region" aria-label="Looping carousel"> <amp-img src="/static/inline-examples/images/image1.jpg" width="450" height="300"></amp-img> <amp-img src="/static/inline-examples/images/image2.jpg" width="450" height="300"></amp-img> <amp-img src="/static/inline-examples/images/image3.jpg" width="450" height="300"></amp-img> </amp-carousel> 在游乐场中打开此代码段
通用属性	此元素包括扩展到 AMP 组件的通用属性。

样式

您可以使用 amp-carousel 元素选择器自由设置其样式。
您可以使用 .amp-carousel-slide 类选择器定位轮播项。
禁用时，amp-carousel 按钮的可视状态为隐藏。
默认情况下，.amp-carousel-button 使用内联 SVG 作为按钮的背景图片。您可以使用您自己的 SVG 或图像覆盖它，如下面的示例所示。

示例：默认 .amp-carousel-button 内联 SVG

.amp-carousel-button-prev {
  left: 16px;
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="%23fff"%3E%3Cpath d="M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z"/%3E%3C/svg%3E');
}

示例：覆盖默认 .amp-carousel-button 内联 SVG

.amp-carousel-button-prev {
  left: 5%;
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="%23fff"%3E%3Cpath d="M11.56 5.56L10.5 4.5 6 9l4.5 4.5 1.06-1.06L8.12 9z"  /%3E%3C/svg%3E');
}

请注意，SVG 内容需要对某些字符进行编码，包括 <、> 和 #。这可以使用 SVGO 等工具或 encodeURIComponent 来完成。

幻灯片支持的布局

如上所述，amp-carousel 0.1 上的 type="slides" 指定支持以下布局：fill、fixed、fixed-height、flex-item、nodisplay 和 responsive。

发布者应注意，虽然此模式明确支持 fixed 布局大小，但它也在其样式中使用 display: flex;。换句话说，嵌套元素可以具有 layout=fixed 大小，但通过样式，它只尊重绝对宽度，最高为 100%。解决此限制的一种方法是在任何固定布局幻灯片上使用 flex-shrink: 0。

为了获得无障碍且流畅的用户体验，在使用 type="slides" 时，通常的一个好做法是该轮播的所有子项和轮播本身共享相同的尺寸比例以及相同的布局类型。

验证

请参阅 AMP 验证器规范中的 amp-carousel 规则。

需要更多帮助？

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

转到 Stack Overflow

发现了一个错误或缺少一个功能？

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

转到 GitHub

amp-carousel 0.2 0.1

描述