Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

AEM Proxy component Issue : carousel

AnnzRoz
Level 2
Level 2

I have tried to create a proxy component of the adobe core component - Carousel-v1 (https://aemcomponents.dev/content/core-components-examples/library/container/carousel.html).

 

proxy.JPG 

sling:resourceSuperType - core/wcm/components/carousel/v1/carousel

In the AEM Product catalog page of carousal , the buttons are icons :

iconInCatalog.JPG
In my proxy component , the icons are coming as buttons :

.IconInProxy.JPG

Which CSS should i call to make it like the catalog page ?  

AEM 6.5.5.0 is the version.

AEM 6.5.5.0 AEM Proxy component carousel
1 Accepted Solution
BrianKasingli
Correct answer by
Community Advisor
Community Advisor

When using the Core WCM Carousel Component, the CSS for this component can be found here, https://github.com/adobe/aem-core-wcm-components/tree/master/content/src/content/jcr_root/apps/core/... simply refer to the client libraries from here :

core.wcm.components.carousel.v1.editor
core.wcm.components.carousel.editor.hook.v1
core.wcm.components.carousel.v1

View solution in original post

11 Replies
Arun_Patidar
Community Advisor
Community Advisor

AEM Component Library using custom css to change look and feel of indicator.

You need to write custom css to :

float indicator to right

hide label

add new icon using pseudo after selector

Example - https://github.com/arunpatidar02/aemaacs-aemlab/blob/master/ui.apps/src/main/content/jcr_root/apps/a...

 

you can ask front end people in your team they would be able to help

BrianKasingli
Correct answer by
Community Advisor
Community Advisor

When using the Core WCM Carousel Component, the CSS for this component can be found here, https://github.com/adobe/aem-core-wcm-components/tree/master/content/src/content/jcr_root/apps/core/... simply refer to the client libraries from here :

core.wcm.components.carousel.v1.editor
core.wcm.components.carousel.editor.hook.v1
core.wcm.components.carousel.v1

View solution in original post

AnnzRoz
Level 2
Level 2
@BrianKasingli , i had tried to add these still , it wasnt loading the correct CSS.I have dowloaded the latest version of aem components from git.
BrianKasingli
Community Advisor
Community Advisor

Also, taking a more detailed looked at the carousel wcm component, it looks like the CSS for the carousel if very bare minimum. You are not expecting to see any NICE or Beautiful design. The CSS produced from the carousel wcm component looks like this, https://github.com/adobe/aem-core-wcm-components/blob/master/content/src/content/jcr_root/apps/core/... very bare minimum.

BrianKasingli
Community Advisor
Community Advisor
Taking even a deeper look, you'll realise the the CSS that comes with the wcm carousel v1, doesn't really have the styling for the buttons. https://github.com/adobe/aem-core-wcm-components/blob/master/content/src/content/jcr_root/apps/core/...... the HTML has these cssClasses, but the overall wcm core carousel v1 component does not include such button styling. You might need to overlay this.
AnnzRoz
Level 2
Level 2
Thanks Brian . The ".t-cmp-clean .cmp-carousel__action--previous .cmp-carousel__action-icon:before" was not seen anywhere in the avilable CSS. Will try to override it.
BrianKasingli
Community Advisor
Community Advisor
my pleasure, and yes that would be the way to go.