轮盘组件 carousel-component

Last update: Fri Jul 12 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

使用核心组件轮盘组件，内容作者可在可导航的轮盘中展示内容。

用途 usage

使用轮盘组件，内容作者可以将内容排列在旋转的幻灯片轮盘中。

内容作者可以使用“编辑”对话框创建、命名和排序多个幻灯片，以及启用带有延迟的自动过渡。使用“设计”对话框，模板作者可以定义哪些组件可以添加到轮盘中，启用或禁用自动过渡，以及自定义样式。

轮盘组件的当前版本是 V1，此版本随 2018 年 10 月的核心组件发行版本 2.2.0 的发布引入，具体说明见本文。

下表详细说明了该组件的所有受支持版本、与该组件的版本兼容的 AEM 版本以及指向早期版本文档的链接。

组件版本

AEM 6.4

AEM 6.5

AEM as a Cloud Service

与
版本 2.17.4 和更低版本兼容

兼容

有关核心组件版本的更多信息，请参阅文档核心组件版本。

要体验轮盘组件并查看其配置选项示例以及 HTML 和 JSON 输出，请访问组件库。

在 GitHub 上可找到有关轮盘组件的最新技术文档。

在核心组件开发人员文档中可找到有关开发核心组件的其他详细信息。

轮盘组件、选项卡组件和折叠面板组件支持直接链接到组件中的面板。

要执行此操作：

在页面编辑器中使用 以发布的形式查看 选项查看带有组件的页面。
检查页面的内容并确定面板的 ID。
- 例如 id="carousel-bfe4fa6647-item-47f1a7ca67-tabpanel"
ID 成为您可以使用哈希 (#) 附加到 URL 的锚点。
- 例如 https://wknd.site/content/wknd/language-masters/en/magazine/western-australia.html#carousel-bfe4fa6647-item-47f1a7ca67-tabpanel

导航到将面板 ID 作为锚点的 URL，浏览器将直接滚动到特定组件并显示指定的面板。如果将面板配置为默认不显示，则将自动滚动它。

所有核心组件均设计为完全响应式，确保跨设备的无缝体验。

一些高级组件（例如轮播组件）可能需要在实施项目的背景下进行具体考虑，以便在所有条件下都保持响应能力。请参阅文档核心组件的响应式设计，了解更多信息。

内容作者可以使用“编辑”对话框添加、重命名和重新排列幻灯片，以及定义自动过渡设置。

轮盘组件“编辑”对话框的“项”选项卡

使用 “添加” 按钮可打开组件选择器，选择要作为选项卡添加的组件。在添加之后，一个条目将添加到列表中，包含以下列：

TIP

如果减小页面视区以便全屏显示“编辑”对话框，则将隐藏**“添加”**按钮。组件仍可以通过从组件浏览器拖动并放置在页面编辑器的轮盘组件上来添加到轮盘组件中。

轮盘组件“编辑”对话框的“属性”选项卡

在属性选项卡上，内容作者可以设置幻灯片自动过渡。

活动项 - 内容作者可定义在加载页面时哪个选项卡活动。
自动过渡幻灯片 - 在激活时，组件将在指定的延迟之后进入下一张幻灯片。
过渡延迟 - 选择了自动过渡幻灯片时，此值用于定义过渡之间的延迟（以毫秒为单位）。
禁止在光标悬停时自动暂停 - 选择了 自动过渡幻灯片 时，只要光标悬停在轮盘上时，轮盘过渡将自动暂停。选择此选项可不暂停过渡。
ID - 利用此选项，可以控制 HTML 和 Data Layer中的组件的唯一标识符。
- 如果留空，系统会自动为您生成一个唯一 ID，可以通过检查结果页面找到该 ID。
- 如果指定一个 ID，作者有责任确保它是唯一的。
- 更改此 ID 会对 CSS、JS 和 Data Layer 跟踪产生影响。