Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Traditional Web Apps

 

 

OutSystems

Carousel

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • We’ve been working on this article. Please let us know how useful this new version is by voting.

    You can use the Carousel UI Pattern to display multiple items in a horizontal slide. This pattern is ideal for creating horizontal slides in smaller screens. You can also use this pattern for dynamic content, by placing a List directly inside the placeholder.

    How to use the Carousel UI Pattern

    1. In Service Studio, in the Toolbox, search for Carousel.

      The Carousel widget is displayed.

    2. To From the Toolbox, drag the Carousel widget into the Main Content area of your application's screen.

    1. Place the content you want to appear in the Carousel into the Items placeholder. (In this example we use images.)

    2. From the Toolbox, drag the Image widget into the Light Box Image widget. This is a thumbnail image.

      The Select Image pop-up is displayed.

    3. Select or import the image you want to display. In this example, we use the sample OutSystems UI images.

      Note: In this example, the image property Type is set to Static. You can also choose External URL or Database.

      To use a Carousel with items from a database, drag a ListRecords widget into Items placeholder and create your custom content.

    4. Repeat steps 4 and 5 for each of the Carousel items.

    5. From the Element tree, select the Carousel widget, and on the Properties tab, set the relevant (optional) properties, for example, navigation arrows and the number of items to display on different devices.

    6. After following these steps and publishing the module, you can test the pattern in your app.

    Properties

    Property Description
    Margin(Integer): Optional Set the distance between each Carousel item. Default value is 0.

    Examples

    • Blank - A distance of 16 pixels between each Carousel item.
    • 32 - A distance of 32 pixels between each Carousel item.
    Padding(Integer): Optional Set the distance between the screen edges and the visible items on the screen.

    Examples

    • Blank - No distance between the screen edges and the on screen item. This is the default value.
    • 5 - A distance of 5 pixels between the screen edges and the on screen item.
    Pagination(Boolean): Optional Enable or disable navigational dots that represent items on the Carousel.

    Examples

    • Blank - Navigational dots are displayed. This is the default value.
    • True - Navigational dots are displayed.
    • False - No navigational dots are displayed.
    Autoplay(Boolean): Optional If set to True, the items in the Carousel are displayed automatically (with a 5 second time delay between each item). If set to False, the autoplay functionality is disabled. This is the default value.
    Rewind(Boolean): Optional If True, a rewind effect is applied when the Carousel reaches the end and the Loop property is enabled. The default behavior is to show the first item without rewinding through the remaining.
    Loop(Boolean): Optional If set to True, once the last item in the Carousel is reached, it loops around to the first item and begins displaying the all of the items again. If set to False, the slide of the Carousel items ends when the last item is reached. This is the default value.
    InitialPosition(Integer): Optional Set which element you want to show first in the Carousel.

    Examples

    • Blank - The first element in the Carousel is displayed. This is the default value.
    • 3 - The 4th element in the Carousel is displayed.
    ItemsDesktop(Integer): Optional Number of Carousel items visible at the same time on a desktop.

    Examples

    • Blank - 1 item is displayed. This is the default value.
    • 4 - 4 items are displayed.
    ItemsTablet(Integer): Optional Number of Carousel items visible at the same time on a tablet.

    Examples

    • Blank - 1 item is displayed. This is the default value.
    • 4 - 4 items are displayed.
    ItemsPhone(Integer): Optional Number of Carousel items visible at the same time on a phone.

    Examples

    • Blank - 1 item is displayed. This is the default value.
    • 4 - 4 items are displayed.
    ExtendedClass (Text): Optional Add custom style classes to the Carousel UI Pattern. You define your custom style classes in your application using CSS.

    Examples

    • Blank - No custom styles are added (default value).
    • "myclass" - Adds the myclass style to the Carousel UI styles being applied.
    • "myclass1" "myclass2" - Adds the myclass1 and myclass2 styles to the Carousel UI styles being applied.
    AdvancedFormat(Text):Optional Enables you to use more options than what is provided in the properties. For more information, visit: https://github.com/ganlanyuan/tiny-slider.

    Example { axis: 'vertical' }

    • Was this article helpful?