Extend AEM Core Carousel Component

[rahuls80678827]

I am working on a business requirement to show 3 images per slide using Core Carousel Component.
I have extended Core Carousel component to achieve this but I am stucked now with the Panel Implementation.

For ex:

If I have 5 images and click on 2nd image from the panel then it should go to 2nd image but currently it goes to 2nd slide (instead of 2nd image)

Has anyone tried to achieve this? Any help would be really appreciated.

Thanks
 

[mrobinson]

Just curious, but have you considered having a 'Container' component be the 'Slide', and then you can place 3 Image components within each slides' container? That way you would only have 2 panels, but would still be able to manage/configure the images individually.

[rahuls80678827]

I have added cq:isContainer="{Boolean}true" in the Carousel's content.xml for carousel component to behave like a container.

[mrobinson]

Right, but what you can do is select the Adobe Core 'Container' component as the 'Slide' of your carousel. Doing so would allow you to place any number of other components in that 'Slide', such as 3 Image components, and those could be resized using the layout editor of the Container.

[rahuls80678827]

Yeah, I tried to add "Core Container" Component inside "Carousel" Component as well and then insert "Image" components in it.

[rahuls80678827]

Yeah, I tried to add "Core Container" Component inside "Carousel" Component as well and then insert "Image" components in it. But it's not fulfilling the purpose:

1. We have to show 3 images/items per slide but in above case, user will be able to insert more than 3 images within "Core Container" component. How can I restrict them?
2. If user has included 5 images in total, then each slide should have 3 images that is:
   • 1st, 2nd & 3rd Image = 1st Slide
   • 3rd, 4th & 5th Image = 2nd Slide