While doing some work we found a problem with the Carousel that happens when you set Loop to True.The setup is simple. Carousel with a list. The list item is an image that comes from an aggregate. Around the image there is a link to a screen action. 4 images are available and the carousel is set to show 3 at the same time.
Clicking the 3 images plus the 4th image when you start looping works. But if you continue to loop and clicks on the first image again, the action is not executed. What seems to be happening is that the click event seems to be bound to the ID of the element (??) but the cloned elements (when looping) have a different id from the original elements. Is there any fix or workaround for this behaviour, so that you can use the Carousel in LOOP and still be able to click the elements independently if you are in the loop?
Hello @Eduardo Jauch,
The Carousel component does not support this use case because of the default behavior of the provider. When a carousel is set to Loop mode, the first and last slides are cloned by the provider to ensure smooth transitions without abrupt changes. However, the event listeners assigned to these slides do not get copied to their clones. As a result, if a Link encloses an Image, it will not trigger the OnClick event but will instead redirect to the current page, as indicated by the href="#" attribute:
Given that, there is nothing we can do on our end to change this behavior. However, as a workaround for this use case, we recommend disabling the Loop mode or using the SetSplideEvent client action inside the Carousel’s Initialized event to set a click event to each slide, as exemplified in the image below:
Hope it helps!
Cheers,GM
Hi,
I’m currently facing the same issue, Could you please share what code is being used inside the JavaScript node? It would really help me resolve the issue
Thanks in advance for your support!
Thank you very much for the fast answer, @Gonçalo Martins. I appreciate!