Carousel

This post is referring to Vahana 2 (beta version). To check the document for production, please go to vDesigner-v1.0

The “Carousel” element is a rotating banner or slideshow that displays the content in a navigated slides or banners. It allows you to manually slide through the images or slides of text, or it plays them automatically.

You can use the carousel element to display images, products, and promotions on the home page. You can configure the carousel to display items horizontally or vertically. In a carousel, you can implement images or slides as clickable items so that when the user clicks an image or slide, the application displays the related content or page.

Usage

When to Use
Use the Carousel element when:
a. A group of content is at the same level
b. The space is a constraint; it can be used to display the important information in form of a revolving door
c. You want to display the same type of pictures, images, and products

Carousel Configuration

The “Carousel” element consists of the following properties:

  • UI Configuration

UI Configuration

For the “Carousel” element, you can configure the following properties:

TabProperty NameDescriptionMandatoryNew Default ValuesVisibility Rules
BasicReference NameSpecifies a unique name of the element. At the application level, an element is identified and managed by the reference name.YesCarousel_xxxxx
BasicInput SourceThis property allows you to configure the source location from where the application fetches the data and then displays it on the card.
You can click one of the following tabs to configure the input source:
1) Data Store:-
If you select this tab, the Input Value box appears. Click in the Input Value box and then select an entity. After you select an entity, the application will fetch the data (image or content) from the entity and then display it on the card.

2) Static:-
If you select this tab, the Input Value box appears. In the Input Value box, enter a value. When the application loads the related page, it will display this static value on the card.
YesData Store
BasicAxisAllows you to define the alignment of the carousel’s content as follows:
i. Vertical:- If you select this tab, the application will display the carousel and its content vertically aligned.

ii. Horizontal:-
If you select this tab, the application will display the carousel and its content horizontally aligned.
NoHorizontal
BasicPagination TypeAllows you to define the pagination indicators in the carousel by providing the following options:
i. None
ii. Circle
iii. Round


If you select the None option, the pagination indicators will not be available with the carousel. The pagination indicators primarily provide information about the number of slides in the carousel.

By seeing the pagination indicator, the user can determine which slide he is seeing and the sequence number of the slide.
NoCircle
BasicAutoplayBy default this property is selected. If this property is selected, the carousel automatically moves the slides to display the content. NoSelected
BasicDelay (Ms)In this box, enter a numeric value (for example:- 1500) in milliseconds. This property allows you to define the time to delay the automatic movement of slides in the carousel.YesNull
BasicInfinite LoopIf you select this property, carousel will automatically redisplay the first slide after the user slides past the last slide.NoSelected
BasicPause On HoverThis property allows you to configure the movement control of the carousel. If you select this property, the application stops the slides’ movement when the user taps a specific slide to view it.NoSelected
BasicVisibleAllows you to configure the visibility of the element.NoSelected
BasicBusiness RuleClick this list and then select a pre-defined business rule that will determine the element’s visibility. If the user’s action satisfies the condition in the business rule, the application will display or hide the element.

To define the business rule, access the Business Rule Manager module.
No
BasicEnableAllows you to configure the user-action on the element. If this property is selected, the user can perform the function on the element.NoSelected
BasicBusiness RuleClick this list and then select a business rule to make the element active or inactive. If the user’s action satisfies the condition in the business rule, the application will make the element active or inactive in the application.

To define the business rule, access the Business Rule Manager module.
No
Apply FilterWhen you click this check box, a Business Rule drop down list comes into view. You can use this property to apply a business rule to display items in the list.NoClear Check box
Business RuleClick this list to select the business rule. After you select the business rule, the app displays items in the list based on the condition defined in the business rule.YesWhen Apply Filter check box is selected
SortingThis property allows you to display the list items in ascending or descending order. Click this list to select one of the following values:
1. Sort Ascending
Select this value to display list items in ascending order.

2. Sort Descending
Select this value to display list items in descending order.
NoSort Ascending
UI Properties-StyleStylesAllows you to select a specific style for the element from the list of pre-defined styles. The vDesigner module offers pre-defined styles that you can apply to the element.NoDefault
UI Properties-BackgroundPagination Active ColorAllows to configure the color of the active pagination indicator. The pagination indicator becomes active when the related slide comes into view on the screen.No#0F61FE
UI Properties-BackgroundPagination Inactive ColorAllows to configure the color of the inactive pagination indicator. The pagination indicator remains inactive until the related slide comes into view on the screen.No#E0E0E0
UI Properties-Alignment and SpacingPaddingThis property allows you to define padding around each side of the icon. It provides four different boxes to define the padding around the right, left, top, and bottom side of the element.NoBased on current position of the element on the canvas
UI Properties-Alignment and SpacingMarginAllows you to desirably define margin around each side of the element. It provides four different boxes to define the margin outside the right, left, top, and bottom border of the element.NoBased on current position of the element on the canvas
UI Properties-Alignment and SpacingComponent’s AlignmentThis property contains three tabs. You can use these tabs as follows:
1. Left:- By default, this tab is selected. It aligns the element to the left of the page.
2. Center:- If you select this tab, it aligns the element at the center of the page.
3. Right:- If you select this tab, it aligns the element to the right of the page.
NoLeft
UI Properties-Shape and DecorationTypeUnder the Shape and Decoration section, this property has the two following options:
i. Auto Fill:- If you select this option, the element will occupy the available space of the parent layout.

ii. Manual:- If you select this option, you can define a specific size of the element.
NoManual
UI Properties-Shape and DecorationWidth ValueEnter the width of the element in the pixel or percentage unit.NoDisabled/Inactive
UI Properties-Shape and DecorationHeight ValueEnter the height of the element in the pixel unit.NoDisabled/Inactive
UI Properties-Shape and DecorationXAllows you to move the element along the X-axis; when the value increases, the element moves from left to right.NoCurrent X axis Co-ordinate
UI Properties-Shape and DecorationYAllows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom.NoCurrent X axis Co-ordinate
Was this article helpful?
YesNo