手动触发AEM Carousel组件点击事件

Question

我想通过使用 JavaScript 或 jQuery 添加自定义导航按钮来增强默认轮播组件的功能，我不了解轮播的 API 或其用于导航的机制。我查看了该组件的文档，但找不到任何内容。是否有预定义的方法来以编程方式控制轮播？如何模拟调用前后移动轮播的函数？

AEM 轮播：https://www.aemcomponents.dev/content/core-components-examples/library/core-content/carousel.html

有没有像您用于 Bootstrap 的东西：

$('#my-next-button').click(function(){ $('#myCarousel').carousel('next'); });

我还在 AEM 社区中发布了此内容 = 没有骰子。

Answer 1

几个月前我有一个类似的需求，并得出结论：该组件不提供允许对其进行调整和控制的 JavaScript API。也就是说，我可以想到您可以考虑的两种选择。

尝试使用数据属性

轮播组件的 [

README

](https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wcm/ Components/carousel/v1/carousel/README.md#javascript-data-attribute-bindings) 提到了与组件关联的 clientlib 识别的数据属性。

假设您有 Carousel 的代理组件（代码库中的一个组件，它引用 Carousel V1 作为超级类型），您可以提供自己的 HTL 脚本，为附加按钮添加标记，并为其指定

data-cmp-hook-carousel="next"

属性。这就是内置按钮的工作原理

据我所知，通过查看 clientlib，只有将它们放置在组件中才有效。这可能没有多大意义，因为此类按钮已经存在于组件内部，因此您也可以按原样使用它们。

完全定制

对于需要支持与开箱即用的行为显着不同的轮播，实现此方法的方法可能是：

1. 为Carousel核心组件创建一个代理组件（这和仅仅使用carousel没有什么区别）
2. 为组件提供您自己的 JavaScript（这可以作为客户端库包含在内，如果您使用 AEMaaCS，则可以作为主题包含在内）以替换基本组件
3. 确保您的自定义代码还注册供创作界面使用的处理程序，就像 OOTB 那样
4. 从自定义 JavaScript 中公开 API，以供其他组件调用。

不过有几句话警告。考虑到 AEM 在组件在页面上的位置以及它们如何相互交互方面的灵活性，您可能会在测试中面临许多边缘情况。无论您提出什么解决方案，都可能必须处理边缘情况，例如：

1. 同一页面上同一组件的多个实例
2. 嵌套在其他组件中的轮播实例，其中一些可能会影响它及其初始化方式（手风琴、选项卡等）
3. 组件已从页面中删除

一般来说，编写以某种方式跨越多个可以拖放所见即所得风格的组件的 JavaScript 的复杂性是不容低估的。识别并强制限制你所做的事情肯定会有所帮助。