Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

AEM Proxy component Issue : carousel

Avatar

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.

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

6.5
1 Accepted Solution

Avatar

Correct answer by
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

Avatar

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



Arun Patidar

Avatar

Correct answer by
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

Avatar

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.

Avatar

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.

Avatar

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.

Avatar

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.

Avatar

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