Carousel Component | AEM 6.4

[shikhasoni1]

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.

[Manu_Mathew_]

@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 · Accepted solution]

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>