Carousel Navigation Outside of Container
Application Type
Traditional Web
Platform Version
11.14.0 (Build 34092)

Hi there,

I'm using a Carousel from Outsystems UI Web on a traditional web module.
The costumer asked me to use a Carousel but with the navigation arrows above or below the Carousel Container.
I've been tinkering with the positioning of the arrows on the css but they are hidden outside of the container. I've already tried "overflow: visible" on every container but with no success.

As anybody ever needed tinkered with this?

I'm also trying other solution, by disabling the navigation on the Carousel input parameter and creating arrows of my own outside of the container, but I haven't been able to make them work so far.

Try to include this CSS on your theme.

In case you want the above you need to do this


.carousel .carousel-navigation{

    top: calc(100% - 0px);

    transform:unset;

    left: unset;

    position:absolute;

    display:unset;

}

.carousel .tns-ovh{

    position:unset;

}


In case you want below

.carousel .carousel-navigation{

    top: calc(100% - 0px);

    transform:unset;

    left: unset;

    position:absolute;

    display: flex;

    align-items: center;

}

.carousel .tns-ovh{

    position:unset;


}


I believe I'm going to use the 2nd solution. It's way easier to create my own arrows and I found that the Carousel widget has "next" and "previous" actions that can be used I imagine exactly for this purpose.

But thanks anyway for the help ;)

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.