Custom Carousel

[vidu_1]

Actually i created a custom slider we can say it custom slider, but the issue is when I used this component in a page 3 times then, suppose first time I selected 4 slides(images and text), second time I chose 3 slides(images and text) third time I chose 2 slides , so the last one which I used is updated why? please provide solution.

[avesh_narang]

Could you please add more details about your issue , I mean :

Since it's a custom slider :

• how events are registered ? 
• does each component is being refered through unique element id ? you can refer component resourcepath to get unique element id .
• please share error snapshot as well .

[vidu_1]

When I use this component multiple times on the same page, the last instance used overrides the previous instances. For example, if the first instance has 4 slides (images and text), the second has 3 slides, and the third has 2 slides, only the third instance’s configuration is applied across all instances.

[avesh_narang · Accepted solution]

@vidu_1As mentioned above, there is a lack of information provided.

I assume that when there is only one component on a page, it is working well, but the issue persists when using the same component multiple times on a single page.

The issue seems to be with the fetching of the correct html element, it seems that you are all referring to the same element id, and when the DOM renders, it will grab the last element and display the result based on that.

Make sure in javascript function/event attched to each component has unique identifier .

Hope this helps , otherwise please share more details on your implenetation approach .

[aanchal-sikka]

@vidu_1 

You would need to verify the JavaScript that's dealing with the Sliders.

Based on where the event happened, it should resolve the slider and then slide in that specific component only.

[HrishikeshKa]

Hi @vidu_1 ,

Based on the information provided, it seems like the issue is related to the way the custom slider component is implemented. Without more details about the implementation, it's difficult to provide a definitive solution. However, here are some general guidelines and considerations that might help:

1. Component Design: Ensure that the custom slider component is designed to handle multiple instances on the same page. Each instance of the component should be independent and not interfere with other instances.

2. Component State: Check how the component stores and manages its state. It's possible that the component is using a shared state object that is being overwritten by each instance. Make sure that each instance of the component has its own state object that is not shared with other instances.

3. Component Configuration: Check how the component is configured and initialized. It's possible that the component is using a global configuration object that is being overwritten by each instance. Make sure that each instance of the component has its own configuration object that is not shared with other instances.

4. Component IDs: Check how the component generates and uses IDs for its elements. It's possible that the component is using the same IDs for elements in each instance, which can cause conflicts and unexpected behavior. Make sure that each instance of the component generates unique IDs for its elements.

5. Testing: Test the component thoroughly with multiple instances on the same page. Try different configurations and make sure that each instance behaves as expected and does not interfere with other instances.

It's also recommended to consult with experienced AEM developers or solution architects who have implemented similar custom components to get insights and best practices specific to your use case.

[kautuk_sahni]

@vidu_1 Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.