I have a mobile screen that has a carousel and my carousel items are full height so that you can swipe the sections of the screen side to side so that you don't have to scroll forever to see all the content.  One of my items has another widget that contains another carousel in order to swipe smaller cards of info.  The problem is that the dots for the main carousel are moving into the dots container for the nested carousel.

The swipes still function like normal.

The first 5 dots are for my nested contact carousel, and the last 6 dots are for the main carousel and should be at the bottom of the screen.

If I inspect the screen you can see all the dots are in the nested carousel dots container:

and the main carousel dots container is empty:


Any way to fix this or is this a bug?


Thanks

Greg

I'm not certain that the Carousel supports nesting. Can you share a small OML that reproduces the issue? I'm happy to take a look and see if I can find a workaround, but I also would recommend considering a different way of accomplishing this, as nested carousels have the potential to be confusing from a UX standpoint, since they would likely be subject to missed swipes by the user.

Solution

Thanks Andrew,


I actually discovered the issue. It’s because the carousel script that adds the dots only considers the class and finds the first instance. I’ve opened a support ticket with Outsystems but in the meantime I’ve cloned the carousel and fixed the issue. 

Thanks,

Greg

Solution

Thanks for the update. Glad you were able to get it working.