Carousel
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
-
In Service Studio, in the Toolbox, search for
Carousel.The Carousel widget is displayed.
-
From the Toolbox, drag the Carousel widget into the Main Content area of your application's screen.
By default, the Carousel widget contains a Carousel Items placeholder, a list list-group placeholder, and an Image widget.
-
Add content to the Carousel Items placeholder.
In this example, we delete the list list-group and add 3 more Image widgets. You can also add a list of images.
-
From the Element Tree, select the Image widget, and on the Properties tab, from the Image drop-down, select or import the image you want in the Carousel.
Note: In this example, the image property Type is set to Local image. You can also add External and Binary Data images.
-
Repeat step 4 for each of the images in the Carousel.
-
From the Element tree, select the Carousel widget, and on the Properties tab, set the relevant (optional) properties, for example, navigation arrows and dots.
After following these steps and publishing the module, you can test the pattern in your app.
Properties
| Property | Description |
|---|---|
| Navigation(Boolean): Optional | Enable or disable arrow buttons to navigate left and right. Examples
|
| Dots(Boolean): Optional | Enable or disable navigational dots that represent items on the Carousel. Examples
|
| Margin(Integer): Optional | Set the distance between each Carousel item. Examples
|
| Padding(Integer): Optional | Set the distance between the screen edges and the visible items on the screen. Examples
|
| AutoPlay(Autoplay Identifier): Optional | Enable or disable the autoplay functionality which displays the items in the Carousel automatically. You can also set the autoplay velocity. The predefined autoplay values are:
Examples
|
| Scale(Boolean): Optional | Use this setting for the active Carousel items. If set to True, when navigating through the images, the size of the active item begins to decrease and the size of the next element that becomes the active item increases. The default value is False. |
| 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. |
| Center(Boolean): Optional | If set to True, the active item in the Carousel is displayed centered horizontally. If set to False, the active item is not centered horizontally. This is the default value. |
| InitialPosition(Integer): Optional | Set which element you want to show first in the Carousel. Examples
|
| ItemsPhone(Integer): Optional | Number of Carousel items visible at the same time on a phone. Examples
|
| ItemsTablet(Integer): Optional | Number of Carousel items visible at the same time on a tablet. Examples
|
| ItemsDesktop(Integer):Optional | Number of Carousel items visible at the same time on a desktop. Examples
|
Compatibility with other patterns
Avoid using the Carousel inside patterns with swipe events, such as the Tabs and Stacked Cards Patterns.
