Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Issue with Custom Carousel in AEM 6.4

Avatar

Level 4

Dear All, Currently I am developing custom carousel. Below are the details of the component.

My Custom Dialog in Touch UI

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"

    jcr:primaryType="nt:unstructured"

    jcr:title="Hero Poster Marquee"

    sling:resourceType="cq/gui/components/authoring/dialog"

    extraClientlibs="[sunita.landing.poster1]"

    width="900px">

    <content

        jcr:primaryType="nt:unstructured"

        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">

        <items jcr:primaryType="nt:unstructured">

            <column

                jcr:primaryType="nt:unstructured"

                sling:resourceType="granite/ui/components/coral/foundation/container">

                <items jcr:primaryType="nt:unstructured">

                    <carousel

                        jcr:primaryType="nt:unstructured"

                        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"

                        composite="{Boolean}true"

                        fieldLabel="Carousel Slides">

                        <field

                            jcr:primaryType="nt:unstructured"

                            sling:resourceType="granite/ui/components/coral/foundation/container"

                            name="./NestedSlides">

                            <items jcr:primaryType="nt:unstructured">

                                <column

                                    jcr:primaryType="nt:unstructured"

                                    sling:resourceType="granite/ui/components/coral/foundation/container">

                                    <items jcr:primaryType="nt:unstructured">

                                        <headerSize

                                            jcr:primaryType="nt:unstructured"

                                            sling:resourceType="granite/ui/components/coral/foundation/form/select"

                                            fieldLabel="Header Size"

                                            name="./headerSize">

                                            <items jcr:primaryType="nt:unstructured">

                                                <font32

                                                    jcr:primaryType="nt:unstructured"

                                                    text="Font Size-32,Line-height-46"

                                                    value="hero-title32"/>

                                                <font45

                                                    jcr:primaryType="nt:unstructured"

                                                    defaultValue="true"

                                                    text="Font Size-45,Line-height-46"

                                                    value="hero-title45"/>

                                                <font50

                                                    jcr:primaryType="nt:unstructured"

                                                    defaultValue="true"

                                                    text="Font Size-50,Line-height-60"

                                                    value="hero-title50"/>

                                            </items>

                                        </headerSize>

                                        <paragraphSize

                                            jcr:primaryType="nt:unstructured"

                                            sling:resourceType="granite/ui/components/coral/foundation/form/select"

                                            fieldLabel="Paragraph size"

                                            name="./paragraphSize">

                                            <items jcr:primaryType="nt:unstructured">

                                                <font32

                                                    jcr:primaryType="nt:unstructured"

                                                    text="Font Size-32,Line-height-46"

                                                    value="hero-title32"/>

                                                <font45

                                                    jcr:primaryType="nt:unstructured"

                                                    defaultValue="true"

                                                    text="Font Size-45,Line-height-46"

                                                    value="hero-title45"/>

                                                <font50

                                                    jcr:primaryType="nt:unstructured"

                                                    defaultValue="true"

                                                    text="Font Size-50,Line-height-60"

                                                    value="hero-title50"/>

                                            </items>

                                        </paragraphSize>

                                        <backgroundimage

                                            jcr:primaryType="nt:unstructured"

                                            sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"

                                            fieldLabel="Background Image"

                                            name="./bgImage"

                                            rootPath="/content/dam/sunita"/>

                                        <sloganImage

                                            jcr:primaryType="nt:unstructured"

                                            sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"

                                            fieldLabel="Invest With Confidence Slogan"

                                            name="./sloganImage"

                                            rootPath="/content/dam/sunita/slogans"/>

                                        <investcopyrightimage

                                            jcr:primaryType="nt:unstructured"

                                            sling:resourceType="granite/ui/components/foundation/form/radiogroup"

                                            name="./investimage"

                                            text="Invest With Confidence Image">

                                            <items jcr:primaryType="nt:unstructured">

                                                <none

                                                    jcr:primaryType="nt:unstructured"

                                                    sling:resourceType="granite/ui/components/foundation/form/radio"

                                                    defaultValue="true"

                                                    text="None"

                                                    value="1"/>

                                                <top

                                                    jcr:primaryType="nt:unstructured"

                                                    sling:resourceType="granite/ui/components/foundation/form/radio"

                                                    text="Top"

                                                    value="2"/>

                                                <bottom

                                                    jcr:primaryType="nt:unstructured"

                                                    sling:resourceType="granite/ui/components/foundation/form/radio"

                                                    text="Bottom"

                                                    value="3"/>

                                            </items>

                                        </investcopyrightimage>

                                        <includeChooseSite

                                            jcr:primaryType="nt:unstructured"

                                            sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"

                                            name="./chooseSite"

                                            text="Include Choose Site?"

                                            value="{Boolean}true"/>

                                        <header

                                            jcr:primaryType="nt:unstructured"

                                            sling:resourceType="cq/gui/components/authoring/dialog/richtext"

                                            fieldLabel="Section Header"

                                            name="./title"

                                            useFixedInlineToolbar="{Boolean}true">

                                            <rtePlugins jcr:primaryType="nt:unstructured">

                                                <format

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <justify

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <lists

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <paraformat

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <links

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <image

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <findreplace

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <subsuperscript

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <spellcheck

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <misctools

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*">

                                                    <specialCharsConfig jcr:primaryType="nt:unstructured">

                                                        <chars jcr:primaryType="nt:unstructured">

                                                            <trademark

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#8482; &amp;nbsp;"/>

                                                            <copyright

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#169; &amp;nbsp;"/>

                                                            <registered

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#174; &amp;nbsp;"/>

                                                            <mdash

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#151; &amp;nbsp;"/>

                                                            <leftdoublequote

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#8220; &amp;nbsp;"/>

                                                            <rightdoublequote

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#8221; &amp;nbsp;"/>

                                                            <servicemark

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#8480; &amp;nbsp;"/>

                                                        </chars>

                                                    </specialCharsConfig>

                                                </misctools>

                                                <styles

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*">

                                                    <styles jcr:primaryType="cq:WidgetCollection">

                                                        <NimusSansRegular/>

                                                        <NimusSansBold/>

                                                        <NimusSansLight/>

                                                        <NimusSansItalic/>

                                                        <NimusSansBoldItalic/>

                                                        <NimusSansCon/>

                                                        <NimusSansBoldCon/>

                                                    </styles>

                                                </styles>

                                            </rtePlugins>

                                            <uiSettings jcr:primaryType="nt:unstructured">

                                                <cui jcr:primaryType="nt:unstructured">

                                                    <inline

                                                        jcr:primaryType="nt:unstructured"

                                                        toolbar="[format#bold,format#italic,format#underline,#justify,#lists,subsuperscript#subscript,subsuperscript#superscript,links#modifylink,links#unlink,links#anchor,#image,findreplace#find,findreplace#replace,spellcheck#checktext,misctools#specialchars,misctools#sourceedit,#styles,#paraformat]">

                                                        <popovers jcr:primaryType="nt:unstructured">

                                                            <justify

                                                                jcr:primaryType="nt:unstructured"

                                                                items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"

                                                                ref="justify"/>

                                                            <lists

                                                                jcr:primaryType="nt:unstructured"

                                                                items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"

                                                                ref="lists"/>

                                                            <paraformat

                                                                jcr:primaryType="nt:unstructured"

                                                                items="paraformat:getFormats:paraformat-pulldown"

                                                                ref="paraformat"/>

                                                            <styles

                                                                jcr:primaryType="nt:unstructured"

                                                                items="styles:getStyles:styles-pulldown"

                                                                ref="styles"/>

                                                        </popovers>

                                                    </inline>

                                                </cui>

                                            </uiSettings>

                                        </header>

                                        <title

                                            jcr:primaryType="nt:unstructured"

                                            sling:resourceType="cq/gui/components/authoring/dialog/richtext"

                                            fieldLabel="Section Paragraph"

                                            name="./heading"

                                            useFixedInlineToolbar="{Boolean}true">

                                            <rtePlugins jcr:primaryType="nt:unstructured">

                                                <format

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <justify

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <lists

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <paraformat

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <links

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <image

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <findreplace

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <subsuperscript

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <spellcheck

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <misctools

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*">

                                                    <specialCharsConfig jcr:primaryType="nt:unstructured">

                                                        <chars jcr:primaryType="nt:unstructured">

                                                            <trademark

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#8482; &amp;nbsp;"/>

                                                            <copyright

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#169; &amp;nbsp;"/>

                                                            <registered

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#174; &amp;nbsp;"/>

                                                            <mdash

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#151; &amp;nbsp;"/>

                                                            <leftdoublequote

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#8220; &amp;nbsp;"/>

                                                            <rightdoublequote

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#8221; &amp;nbsp;"/>

                                                            <servicemark

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#8480; &amp;nbsp;"/>

                                                        </chars>

                                                    </specialCharsConfig>

                                                </misctools>

                                                <styles

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*">

                                                    <styles jcr:primaryType="cq:WidgetCollection">

                                                        <NimusSansRegular/>

                                                        <NimusSansBold/>

                                                        <NimusSansLight/>

                                                        <NimusSansItalic/>

                                                        <NimusSansBoldItalic/>

                                                        <NimusSansCon/>

                                                        <NimusSansBoldCon/>

                                                    </styles>

                                                </styles>

                                            </rtePlugins>

                                            <uiSettings jcr:primaryType="nt:unstructured">

                                                <cui jcr:primaryType="nt:unstructured">

                                                    <inline

                                                        jcr:primaryType="nt:unstructured"

                                                        toolbar="[format#bold,format#italic,format#underline,#justify,#lists,subsuperscript#subscript,subsuperscript#superscript,links#modifylink,links#unlink,links#anchor,#image,findreplace#find,findreplace#replace,spellcheck#checktext,misctools#specialchars,misctools#sourceedit,#styles,#paraformat]">

                                                        <popovers jcr:primaryType="nt:unstructured">

                                                            <justify

                                                                jcr:primaryType="nt:unstructured"

                                                                items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"

                                                                ref="justify"/>

                                                            <lists

                                                                jcr:primaryType="nt:unstructured"

                                                                items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"

                                                                ref="lists"/>

                                                            <paraformat

                                                                jcr:primaryType="nt:unstructured"

                                                                items="paraformat:getFormats:paraformat-pulldown"

                                                                ref="paraformat"/>

                                                            <styles

                                                                jcr:primaryType="nt:unstructured"

                                                                items="styles:getStyles:styles-pulldown"

                                                                ref="styles"/>

                                                        </popovers>

                                                    </inline>

                                                </cui>

                                            </uiSettings>

                                        </title>

                                    </items>

                                </column>

                            </items>

                        </field>

                    </carousel>

                </items>

            </column>

        </items>

    </content>

</jcr:root>

My Custom landing-poster-carousel.html Contents

<sly data-sly-use.carousel = "com.aem.sunita.pojo.Carousel1"/>

<div id="myCarousel" class="carousel-eb carousel slide" data-ride="carousel">

<sly data-sly-test="${carousel.slidesList}">

<div class="carousel-inner ${properties.addPadding ? 'carousel-inner-eb' : ''}" role="listbox">

<sly data-sly-list="${carousel.slidesList}">

<div class="item ${item.count == '0' ? 'active' : ''}">

<img class="hero_marquee" src="${item.bgImage}">             

<!--<div class="centered"><p>asdfdddddddddd</p></div>-->

<div class="centered">

  <span class="${properties.headerSize}">${item.title @context='html'}</span><br>

                <span class="${properties.paragraphSize}">${carousel.heading @context='html'}</span>

</div>

</div>

</sly>

</div>

</sly>

<sly data-sly-test.slide="${carousel.slidesList}">

<sly data-sly-test="${slide.size > 1}">

<a id="left" class="left carousel-control ${properties.addPadding?'':'carousel-control-np'} left-arrow ${item.count}" href="#myCarousel" data-slide="prev" >

<em class="fa fa-angle-left"></em>

</a>

<a id="right" class="right carousel-control ${properties.addPadding? '' :'carousel-control-np'} right-arrow" href="#myCarousel" data-slide="next" >

<em class="fa fa-angle-right"></em>

</a>

<div class="${properties.addPadding? '' : 'indicator-eb' }">

<ol class="carousel-indicators">

<sly data-sly-list="${carousel.slidesList}">

<li data-target="#myCarousel" data-slide-to="${item.count}" class="${item.count == '0' ? 'active' : ''}"></li>

</sly>

</ol>

</div>

</sly>

</sly>

</div>

<style>

#hero_marquee {

    background-image: url('${properties.bgImage @context='uri'}');

    background-size: cover; 

    background-repeat: no-repeat;

    background-position: center top;

}

.centered {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  color: white;

}

.learn-more {

  font-size:18px;

  text-decoration: none;

  background-image: url("/content/dam/sunita/an-arrow-nb.png") !important;

  background-position: right center;

  background-repeat: no-repeat;

}

@media screen and (max-width: 550px) {

#hero_marquee .phone-background-image{

background-image: url('${properties.bgImage @context='uri'}');

    background-repeat: no-repeat;

    background-position: center top;

    background-size: cover;

}

}

</style>

My Java Class file is below

package com.aem.sunita.pojo;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.Iterator;

import java.util.List;

import java.util.Map;

import org.apache.sling.api.resource.Resource;

import org.apache.sling.api.resource.ValueMap;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import com.adobe.cq.sightly.WCMUsePojo;

public class Carousel1 extends WCMUsePojo{

private static Logger LOG = LoggerFactory.getLogger(Carousel1.class);

private List<Map<String, String>> slidesList = new ArrayList<Map<String, String>>();

private String flag = "flase";

private String title;

private String heading;

@Override

public void activate() throws Exception {

    Resource currentResource = getResource();

    LOG.info("currentResource123  ==  " + currentResource);

    Resource multifieldPropRes = currentResource.getChild("NestedSlides");

    LOG.info("multifieldPropRes123  ==  " + multifieldPropRes);

    if(multifieldPropRes != null) {

    Iterator<Resource> itr = multifieldPropRes.listChildren();

    int count = 0;

    int index = 0;

    while (itr.hasNext()) {

Resource childRes  = itr.next();

LOG.info("childRes123  ==  " + childRes);

ValueMap properties = childRes.getValueMap();

Map<String,String> jsonMap = new HashMap<String,String>();

LOG.info("properties123  ==  " + properties);

if(properties.get("bgImage") != null) {

jsonMap.put("bgImage", properties.get("bgImage").toString());

}

if(properties.get("title") != null) {

jsonMap.put("title", properties.get("title").toString());

}

/*if(properties.get("heading") != null) {

jsonMap.put("heading", properties.get("heading").toString());

}*/

String propHeading = getProperties().get("heading", String.class);

if (propHeading != null) {

String newHeading = propHeading.replaceFirst("<p>", "");

if (newHeading.contains("<p>")) {

heading = propHeading;

jsonMap.put("heading", heading);

} else {

heading = newHeading.replaceFirst("</p>", "");

jsonMap.put("heading", heading);

}

}

if(index >1) {

flag = "true";

}

jsonMap.put("flag",flag);

jsonMap.put("count", Integer.toString(count));

count++;

index++;

slidesList.add(jsonMap);

}

    }

}

public List<Map<String, String>> getSlidesList() {

return slidesList;

}

}

The issue is here that when I am calling the heading from my java class carousel1 , as shown in below then it is not coming. But if I am calling the heading from item from dialog then , it is coming fine. I feel I am missing something , but not able to figure out. Can anybody please help me on this. It is urgent

<span class="${properties.headerSize}">${item.title @context='html'}</span><br>   --->     It is coming fine.

<span class="${properties.paragraphSize}">${carousel.heading @context='html'}</span>   --->  It is not coming fine.

Thanks & Regards

Sonu

1 Accepted Solution

Avatar

Correct answer by
Level 10

Screenshots from WKND site -

1667975_pastedImage_1.png

1667953_pastedImage_0.png

View solution in original post

15 Replies

Avatar

Community Advisor

Hi,

Please check below to find out how to iterate map in HTL.

Sightly : How to Iterate through Map&lt;String , Map&gt;



Arun Patidar

Avatar

Level 4

Hi Arun,

Thanks a lot for the response. I will look into the above URL and let everybody know.

Dear All,

Is there any good example of custom carousel in AEM 6.4 ?

Avatar

Level 10

For AEM 6.4 - the AEM Team strongly suggests that you use the CORE CAROUSEL Component -

Working with Adobe Experience Manager Carousel Core Components

Hope this helps...

Avatar

Level 4

Dear All,

Thanks for all of your response. Our business wants to put pause/Resume functionality in Carousel.

As I know Core Carousel component does not have pause/resume functionality.

Can you please let us know how we can achieve this functionality in CORE Carousel.

Also anybody has any example of Carousel with Pause/Resume functionality ?

Avatar

Level 10

As you stated, Core Component does not have that functionality. We do not have examples of that either. If you need that - you may have to look at using other Carousel libs - like a JQuery plug-in that supports that.

Avatar

Level 10

Could you provide more details on what kind of pause/resume functionality is missing in carousel component?

I can see that pause and play (aka resume) buttons are available in source code. Test it on pub or with wcmmode=disabled on author as the code has a check of edit/preview mode

aem-core-wcm-components/carousel.html at master · adobe/aem-core-wcm-components · GitHub

Avatar

Level 4

Hi Gaurav,

When I am working on core carousel component then , I am not able to see any Play "or" pause button like below.

1667951_pastedImage_1.png

Author wants Play and Pause button in the carousel slide , as shown above. This feature is not available.

Did you test in AEM 6.4 author environment and able to get this pause/play button. Can you please share the screenshot.

Avatar

Level 10

Enable auto-transition in the dialog of carousel, specify transition time, say 2 seconds.

Try it on publish server or append wcmmode=disabled in the url. It wouldn't auto-play on EDIT and PREVIEW modes on author because of mode check condition in the source code

data-cmp-autoplay="${(wcmmode.edit || wcmmode.preview) ? '' : carousel.autoplay}"

Avatar

Correct answer by
Level 10

Screenshots from WKND site -

1667975_pastedImage_1.png

1667953_pastedImage_0.png

Avatar

Level 4

Thanks Gaurav.

For me Disable automatic pause on hover is not coming. I am using AEM 6.4 only. I have not installed SP2.

1667976_pastedImage_0.png

Do you have tested in AEM 6.4 SP2 ??

Avatar

Level 4

Sure , I will coordinate with AMS for SP2 installation.

Avatar

Level 10

The screenshots are from 6.4.3

The code is from core components 2.2.2 so it may happen that 6.4.2 would have 2.2.0 which has a bit different options.

You may try for SP3 or 2.2.2 with SP2 if you/your project is fine with it.

Avatar

Level 4

Yes Correct , As we have 2.2.0 core component in our AEM 6.4. Sure we will check for 2.2.2.