DecSoft App Builder

Carousel description

The Carousel control allows to show more than one images in an slide or fade manner. We can use the control provided properties and methods in order to change the image which is show, start and stop the carousel cycle and more.

There is a Carousel sample app included with the installation of DecSoft App Builder. Take a look to see this control in action!

Carousel CSS rules

This control has a default style, and, some control JavaScript properties (see below), can also changes the control style, not to mention the Classes property, that you can use to establish one or more CSS classes to be applied to the control.

In addition to that style, you can also set custom CSS rules for the control by using the IDE controls style inspector. If this is not enough, you can include any number of CSS stylesheets in the app by using the app files manager.

If you want to use CSS stylesheets, you need to know how to refer to the control, so take a look at the Runtime selectors help topic.

Carousel at designtime

The Carousel control put at your disposition the below designtime properties or variables. Designtime means here that these properties are only available in designtime and not in runtime.

Carousel at runtime

The Carousel control put at your disposition the below runtime properties or variables. You can set almost all these variables in designtime, and, they are also available to be use when the app is running. Note that we named here these variables in a capitalized way, because is like you can see it in the designtime control's inspector, however, at runtime we use the lower camel case way.

Carousel methods

The Carousel control put at your disposition the below methods. You can use these methods in runtime in order to perform various control related tasks.

Carousel events

The Carousel control put at your disposition the below events handlers:

Carousel designtime properties

Carousel Top property

Designtime. Integer variable. The Top property stores the top position of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Carousel Left property

Designtime. Integer variable. The Left property stores the left position of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Carousel Width property

Designtime. Integer variable. The Width property stores the width of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Carousel Height property

Designtime. Integer variable. The Height property stores the height of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Carousel Locked property

Designtime. Boolean variable. The Locked property determines if the control can be moved or resized in app view designer or not. Set a "false" value mean the control can be moved and resized. Set a "true" value (by default) mean the control cannot be moved nor resized. Remember that this control property is only for designtime and is not available in runtime.

Carousel runtime properties

Carousel Name property

Runtime. String variable. The Name control property stores the name of the Carousel control as you set in designtime. The Name property value must be unique for the same app view, dialog or frame, that is, it's possible to have more than one "carousel1" in the app, if that controls resides in different app views, dialogs or frames. Note that you must consider this variable as read only: change the name of a control in runtime can cause unexpected results.

Carousel Event property

Runtime. Mixed variable. The Event control property stores the "event" variable received in all the control events. This variable can contain the target (HTML element of the control) that fire the event and more useful stuff.

Carousel Sources property

Runtime. Array of objects variable. The Sources control property stores the information of the images that must be shown into the Carousel. You can set this variable at designtime using the Carousel sources dialog. You can also manipulate this variable at runtime like any other array variable in order to change the Carousel sources.

Carousel Source property

Runtime. Object variable. The Source control property is an empty object by default, and, it's filled with the clicked slide in the Carousel control. This variable is available inside the control SlideClick event

The Source control property has the below properties:

Name Type Description
url String The URL of the slide that has been clicked by the user.
caption String The caption of the slide that has been clicked by the user.
index Number The index (starting by zero) of the slide that has been clicked by the user.

Carousel Captions property

Runtime. Boolean variable. The Captions control property determines if the optional captions that we can set in the Sources property are shown or not in the carousel. This variable is set to "true" by default, but you can set it to "false" to hide the captions.

Carousel Controls property

Runtime. Boolean variable. The Controls control property determines if the controls which allows the user to change between the carousel slides are shown or not. This variable is "true" by default, but you can set it to "false" to hide the Carousel controls. You can control the carousel behaviour using the provided control methods.

Carousel Fade property

Runtime. Boolean variable. The Fade control property determines if a fade animation must be use when the carousel changes between the slides. This variable is "false" by default, but you can set it to "true" to use the fade animation instead of the regular "slide animation".

Carousel Indicators property

Runtime. Boolean variable. The Indicators control property determines if the Carousel slides indicators must be show or not. This variable is "true" by default, but you can change it in order to hide the Carousel indicators.

Carousel Interval property

Runtime. Number variable. The Interval control property determines the milliseconds between the Carousel changes between one slide to another. This variable has a value of "5000" (five seconds) by default.

Carousel ImageFit property

Runtime. String variable. The ImageFit determines how the carousel slides images are show even if the app "Scale" option is set to "true". You can use one of the available "app.imageFit.*" constants to set this property, which is "cover" by default.

Carousel Title property

Runtime. String variable. The Title control property stores some small but descriptive text, mainly to be used to be show that text when the user place the mouse cursor into the control.

Carousel Classes property

Runtime. String variable. The Classes control property stores one or more additionals CSS classes (space separated) to be applied to the control.

Carousel Hidden property

Runtime. Boolean variable. The Hidden control property determines if the control appear visible to the user or not. Set to "true" to hide the control, or to "false" to show the control (by default).

Dropdown runtime methods

Carousel cycle() method

Runtime method. You can use this Carousel control method in order to start the carousel slides cycle. This method do not require any argument.

Carousel pause() method

Runtime method. You can use this Carousel control method in order to pause the carousel slides cycle. This method do not require any argument.

Carousel next() method

Runtime method. You can use this Carousel control method in order to show the next carousel slide. This method do not require any argument.

Carousel prev() method

Runtime method. You can use this Carousel control method in order to show the previous carousel slide. This method do not require any argument.

Carousel events

Carousel SlideClick event

The SlideClick event handler is fired when an specific slide of the Carousel has been clicked by the user. When this event is fired the control Source property is propertly filled with the information of the clicked slide. See also the available events variables.

Carousel Click event

The Click event handler is fired when the user click or tap into the Carousel control. See also the available events variables.

Carousel DblClick event

The DblClick (Double Click) event handler is fired when the user double click or double tap into the Carousel control. See also the available events variables.

Carousel MouseUp event

The MouseUp event handler is fired when the user up the mouse into the Carousel control. See also the available events variables.

Carousel MouseDown event

The MouseDown event handler is fired when the user down the mouse into the Carousel control. See also the available events variables.

Carousel MouseMove event

The MouseMove event handler is fired when the user move the mouse into the Carousel control. See also the available events variables.

Carousel MouseEnter event

The MouseEnter event handler is fired when the user enter the mouse into the Carousel control. See also the available events variables.

Carousel MouseLeave event

The MouseLeave event handler is fired when the user leave the mouse from the Carousel control. See also the available events variables.

Carousel ContextMenu event

The ContextMenu event handler is fired when the browser must shown the context menu of the the Carousel control, which occur when the user click with the right mouse button into the Carousel control. See also the available events variables.

Carousel events variables

The below JavaScript variables are available in all the referred Carousel control events handlers:

Name Type Description
event Mixed This variable is received in almost all control events. You can use this variable to stop the propagation of the event, to access the HTML element who fire the event and more.
self Object Stores the control object. This is a shortcut to the control variable, and it's available since we are talking about specific control events.
view Object

Stores the current app view or dialog. This variable allow us to access to that view or dialog properties and methods and also their controls properties and methods. For example, you can access to a control properties using the variable "view.yourControlName", suposing the control is named "yourControlName".

views Object Stores all the loaded app views. Note that loaded views mean that the app views has been previously show to the user. It's possible to access to the app view controls properties like "views.view1.yourControlName", suposing the view is named "view1" and the control is named "yourControlName". In the same way we can access to other controls of the view and to other loaded views and their controls.
frames Object Stores all the app frames. You can use this variable to access to all the app frames and their controls.
dialogs Object Stores all the app dialogs. You can use this variable to access to all the app dialogs and their controls.
app Object Stores all the app properties and methods. You can use this variable to access to all the app properties and app methods.