I am using Interaction/carousel widget to display the images.
Let us consider for 3 images in a list
Loop = true
Image size = 879*490
When I navigate to the last element (right arrow) - direction of the image is RTL (right to left)
Click on the arrow again - direction of the image is LTR (left to right)
Same applies for left arrow navigation as well. Mostly happening when arrived to last element and click next.
This behavior is expected when the Loop = true property is enabled in the Interaction/Carousel widget.
When the carousel reaches the last image and the user clicks the next arrow again, the component internally jumps from the cloned last slide back to the first slide. Because of this transition logic, the animation direction may appear reversed (LTR instead of RTL). The same happens while navigating backwards from the first slide to the last slide.
In your case, since the images are large (879x490) and only 3 items are present in the list, the loop transition becomes more noticeable. The carousel creates duplicate slides internally to achieve infinite looping, which can cause this visual direction switch during edge navigation.
To avoid this behavior, you can try one of the following approaches:
Disable Loop if infinite scrolling is not mandatory.
Increase the number of images/items in the carousel.
Use a different transition effect if supported.
Apply custom JavaScript/CSS to control the animation direction manually.
This is generally related to how the underlying carousel library handles infinite looping rather than an issue with the image size itself.
Thanks for your response!
Complementing the previous answer - this behavior is due to the Loop = true property is enabled in the Interaction/Carousel widget.
In this link you can see the pattern documentation and how to configure it.
https://success.outsystems.com/documentation/11/building_apps/user_interface/patterns/using_mobile_and_reactive_patterns/interaction/carousel/