Carousel Component | AEM 6.4 | Community
Skip to main content
shikhasoni1
shikhasoni1
Level 3
November 6, 2022
Solved

Carousel Component | AEM 6.4

  • November 6, 2022
  • 2 replies
  • 802 views

I have one custom carousel Component having more than 3 slides (authorable). These slides are custom Media Component. 

Now my requirement is i want to show one logo (authorable) to the top left corner of "only 1st slide".

How can i achieve that?

 

Because if i will put the authoring logo option in Media component then this will be common for all slides, but the requirement is for only 1st slide/Media Component.

 

Thanks in advance.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Saravanan_Dharmaraj

You can keep the logo outside of multifield in the dialog since you are showing it only for the first item

Below is the sample code to check for first index 

 

<div data-sly-list="${carouselModel.items}">
    <div data-sly-test="${itemList.index==0}">
         //Show image here for first item   
    </div>
    <div>
        //Show carousel items here
     </div> 
</div>

 

 

2 replies

Manu_Mathew_
Community Advisor
Manu_Mathew_Community Advisor
Community Advisor
November 6, 2022

@shikhasoni1 If you are using multi-fields to configure your slides , you could use an optional flied for logo.

or you could use the index of the list for your data-sly-test condition to target the 1st slide while rendering your html.

    Saravanan_Dharmaraj
    Community Advisor
    Saravanan_DharmarajCommunity AdvisorAccepted solution
    Community Advisor
    November 6, 2022

    You can keep the logo outside of multifield in the dialog since you are showing it only for the first item

    Below is the sample code to check for first index 

     

    <div data-sly-list="${carouselModel.items}">
    <div data-sly-test="${itemList.index==0}">
         //Show image here for first item   
    </div>
    <div>
        //Show carousel items here
     </div> 
</div>

     

     

      Terms & ConditionsAccessibility statement

      Loading footer...