Skip to main content
Version: v11.7.1

Carousel

Carousel widget is a flexible, responsive way to add a slider to your site. In addition to being responsive, the content is flexible enough to allow images, iframes, videos, or just about any type of content that you might want.

WaveMaker provides you with two types of Carousel:

  1. Dynamic where the Carousel content will take the form of an array or any repeated list like a dataset. The number of items displayed within the carousel will depend upon the number of rows in the bound variable. Carousel Template a subWidget of Carousel holds the slide content.
  2. Static where the Carousel content can be bound to individual image resources. Carousel Content a subWidget of Carousel holds the slide content. By default, Carousel comes with three carousel contents each with a picture widget. You can add more using the Add Carousel action property.

Properties

PropertyDescription
NameThe name is a unique identifier for Carousel.
Add Carousel (available only for Static Carousel)Allows you to add carousel content to the carousel widget.
Layout
WidthThe width of your widget can be specified in px or % (i.e 50px, 75%).
HeightThe height of your widget can be specified in px or % (i.e 50px, 75%).
Dataset (available only for Dynamic Carousel)
ValueSet this bindable property to a variable to populate the list of images to display.
Behavior
ShowShowing determines whether or not a component is visible. It is a bindable property.
Load on Demand (visible only when show property is bound to a variable)When this property is set and show property is bound, the initialization of the widget will be deferred till the widget becomes visible. This behavior improves the load time. Use this feature with caution, as it has a downside (as we will not be able to interact with the widget through script until the widget is initialized). When show property is not bound the widget will be initialized immediately.
Enable ControlsThis property allows you to enable the controls in the form of: - navs - arrows on either side of the images, - indicators - dots at the bottom of the images, - both - default or - none
AnimationThis property controls the animation of an element. The animation is based on the CSS classes and works only in the run mode. Can be set to: - auto - default or - none.
Animation IntervalThis property defines the animation interval in seconds.

Carousel Content (only for Static Carousel) SubWidget of Carousel to hold a slide content. By default, Carousel comes with three carousel contents each with a picture widget. You can add more using the Add Carousel action button.

PropertyDescription
NameThe name is a unique identifier for your widget.
Layout
WidthThe width of your widget can be specified in px or % (i.e 50px, 75%).
HeightThe height of your widget can be specified in px or % (i.e 50px, 75%).
Behavior
ShowShowing determines whether or not a component is visible. It is a bindable property.
Load on Demand (visible only when show property is bound to a variable)When this property is set and show property is bound, the initialization of the widget will be deferred till the widget becomes visible. This behavior improves the load time. Use this feature with caution, as it has a downside (as we will not be able to interact with the widget through script until the widget is initialized). When show property is not bound the widget will be initialized immediately.
Format
Horizontal AlignSet text alignment horizontally, can be left, center or right.

Carousel Template (only for Dynamic Carousel) SubWidget of Carousel to hold a slide content. The number of images displayed will be determined by the values of the variable bound to the Dataset Value property of Carousel.

PropertyDescription
NameThe name is a unique identifier for your widget.
Layout
WidthThe width of your widget can be specified in px or % (i.e 50px, 75%).
HeightThe height of your widget can be specified in px or % (i.e 50px, 75%).
Behavior
ShowShowing determines whether or not a component is visible. It is a bindable property.
Load on Demand (visible only when show property is bound to a variable)When this property is set and show property is bound, the initialization of the widget will be deferred till the widget becomes visible. This behavior improves the load time. Use this feature with caution, as it has a downside (as we will not be able to interact with the widget through script until the widget is initialized). When show property is not bound the widget will be initialized immediately.
Format
Horizontal AlignSet text alignment horizontally, can be left, center or right.

Event

EventDescription
ChangeThis event handler is called each time your element's value changes.