AEM Proxy component Issue : carousel

[AnnzRoz]

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).

 

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

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

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

.

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

AEM 6.5.5.0 is the version.

[arunpatidar]

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

[AnnzRoz]

Thanks Arun, just wanted to confirm.

[BrianKasingli · Accepted solution]

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

[AnnzRoz]

@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]

Try using this URL, http://localhost:4502/libs/granite/ui/content/dumplibs.test.html?categories=core.wcm.components.caro... what do you see?

This is what I see:

Visiting the .css file, here's what I see:

[BrianKasingli]

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]

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]

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]

my pleasure, and yes that would be the way to go.

[BrianKasingli]

Did you get this working as expected?

[Annie_Rose_Peter]

Thanks @BrianKasingli added styling in CSS separate and got it working.