Create a new clientlib named ‘ clientlib-bootstrap’ (categories=””’) like this:.Reuse the CC Carousel Model ( .Carousel) without customization.Reuse the CC cq:dialog properties (without customization) to implement the autoplay feature.Adjust the CC js in order to improve the author experience: use CC Carousel js in edit mode while BS Carousel js in publish mode.Adjust the CC css in order to avoid overlapping CC css with BS css.

Adjust the CC HTL in order to accommodate the BS Carousel HTML structure.

Our team is composed by Front-end developers (CSS/JS), we need to reduce Java and cq:dialog customizations at minimum.When comparing the 2 carousels, the HTML structures are quite different so adjustments in HTL will be needed.The CC Carousel provides css classes, we do not need them neither in edit nor in publish mode while we’ll use the BS Carousel css both during editing and in publish mode (the author will have a better view of the resulting page).We do not need it in preview and/or in publish mode on the other side, in the publish mode we’ll use the BS Carousel js. The CC Carousel provides a js, this js is important during the editing mode.We’ll include the BS js and css directly as a clientlib in the ui.apps project, another approach is to use the ui.frontend project as described by Adobe's documentation (the implementation via ui.frontend is out of the scope of this article).įirst of all, we have to consider few things: We’ll use Bootstrap v5 in this article and AEM SDK 20. We want to customize Core Component (CC) Carousel in order to have a Bootstrap (BS) Carousel by reusing both BS styles (CSS) and BS features (JS). The Bootstrap Carousel (BS in the following) has to co-exist with the Core Component (CC in the following) Carousel, even on the same page. The Bootstrap Carousel has to provide an optional autoplay feature with delay. Bootstrap Carousel with indicators and controls

Bootstrap studio create component