Swiper

A slideshow component for cycling through elements—images or slides of text—like a carousel.

Note

In order to swipe through images or text, a Swiper component must have at least two Swiper Item components.

Style Properties

Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.

Component Specific Styles

Property	Description
Previous Title Color	Select the color of the Previous button title.
Next Title Color	Select the color of the Next button title.
Dot Color	To select the color of Dots
Dot Active Color	To select the color of the active Dot

Configuration Properties

Property	Description
Component Name	To alter the name of the component. The name is reflected in the Components tree. Defaults to Swiper.
Initial Slide	Initial slide index. It starts from 0.
Loop	Enables a continuous loop mood. By default, it is not enabled.
Timeout	Delay between auto-play transitions (in second). By default, set to 0.
Vertical	By default, the Swiper component displays content in the horizontal direction. If you want to display content in a Vertical direction, enable this option.
Previous Title	Previous button title.
Next Title	Next button title.
Dots Touchable	Touches over dots will move Swiper to the relative slide (previous or next). Enabled by default.

Data Properties

Property	Description
SwiperItem Data	An array of data to render for each Swiper Item

Conditional Display

You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.

Triggers

Trigger name	Description
On Index Changed	Runs the Actions when the index changes
On Swiped Next	Runs the Actions when swiped to the next item
On Swiped Previous	Runs the Actions when swiped to the previous item
On Swipe	Runs the Actions when the element is swiped

Actions

Property	Description
Swipe Next	Swipes to the next item in the Swiper
Swipe Previous	Swipes to the previous item in the Swiper
Swipe To	Swipes to a specific item in the Swiper based on its index within the Swiper