Skip to main content

 

Traditional Web

 

Applies only to Traditional Web Apps

 

OutSystems

Carousel Reference

  • Edit
  • Layout and classes

    Advanced

    Here are some more advanced use-cases of the widget.

    To place the arrows outside the carousel, change the input parameters Padding and Margin. To have this behavior both parameters must be of the same value. Padding creates a space around the carousel viewport and the margin pushes the elements apart, so they are hidden inside the carousel.


    Customizing the dots style

    It is possible to change the style of the dots on a Carousel with the custom CSS. Here are two examples of how to do it. To use in your application, copy the CSS and put it in your theme.

    Example 1

    .carousel .tns-nav > [aria-controls] {
        width: 16px;
        height: 2px;
        border-radius: 0;
    }
    

    Example 2

    .carousel .tns-nav > [aria-controls] {
        width: 12px;
        height: 6px;
        border-radius: 4px;
    }
    

    Notes

    Line Separator from ListRecords should be None.

    • Was this article helpful?