Strange Transition Behaviour with Reactive Carousel Widget from Outsystems UI

I'm developing a Reactive Web Application in Outsystems 11.8.7 and there is a strange transition behaviour with Reactive Carousel Widget from Outsystems UI Module.

It is more visible when there is a bigger quantity of items in the carousel, what happens is that when the exibition of image items hits the last position, instead of just navigate from the last element to the next element( the first element) smoothly, instead it makes an kind of a fast roll back from the last element to the first passing by the other items in the middle of the list, which i believe is not a common thing to happen and kinda highlight in the screen too much

To help understand, i will add two gifs to better exemplify the problem.


- Outsystems Carousel Example



- Bootstrap Example in W3Schools



Thanks in advance!

Hi Leandro,

In fact, before reading your post, I just visited a website (from a local news agency) that had exactly that behaviour! So it's not unheard of. I agree though it's not too nice looking.

Kilian Hekhuis wrote:

Hi Leandro,

In fact, before reading your post, I just visited a website (from a local news agency) that had exactly that behaviour! So it's not unheard of. I agree though it's not too nice looking.

 Thank you for the reply,

Could it be an pattern too, but i believe it's not common one, it would be nice for us developers if this widget give us options about how we want to display this transition.

Solution

Hi Leandro

Thank you for sharing this. The Carousel was designed to handle loops like this, to avoid cloning elements and manipulating the DOM (this is how some libraries like OWL do it). Doing that would create additional issues managing the lifecycle of the screen with constant updates of Carousel items.

Bottom line is that the team will not have an improvement soon for this use case, but it's something we'll keep an eye on for the future.

Cheers

Solution