Swiper
A slideshow component for cycling through elements—images or slides of text—like a carousel.
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 |
Updated 6 months ago