Issue with Custom Carousel in AEM 6.4

sunitac70336244 10-01-2019

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

Answers (14)

Answers (14)

gauravb41175071
MVP
14-01-2019

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.

sunitac70336244 14-01-2019

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 ??

gauravb41175071
MVP
14-01-2019

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}"

sunitac70336244 14-01-2019

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.

gauravb41175071
MVP
14-01-2019

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

smacdonald2008 14-01-2019

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.

sunitac70336244 14-01-2019

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 ?

sunitac70336244 11-01-2019

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 ?