Custom Carousel | Community
Skip to main content
V
vidu_1
May 21, 2024
Solved

Custom Carousel

  • May 21, 2024
  • 4 replies
  • 1269 views

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.

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 avesh_narang

@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 .

4 replies

avesh_narang
avesh_narang
Level 3
May 21, 2024

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 .
    V
    vidu_1Author
    May 21, 2024

    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
      avesh_narangAccepted solution
      Level 3
      May 21, 2024

      @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
        Community Advisor
        aanchal-sikkaCommunity Advisor
        Community Advisor
        May 21, 2024

        @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.

        Aanchal Sikka
          HrishikeshKagne
          Community Advisor
          HrishikeshKagneCommunity Advisor
          Community Advisor
          May 21, 2024

          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.

          Hrishikesh Kagane
            kautuk_sahni
            Community Manager
            kautuk_sahniCommunity Manager
            Community Manager
            June 4, 2024

            @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.

            Kautuk Sahni
            Terms & ConditionsAccessibility statement

            Loading footer...