carousel
The carousel is an interactive component that enables you to browse through a set of items visually appealing and intuitively, enhancing the overall experience by making navigation of content engaging and dynamic. The carousel component provides a set of items, such as images, products, or content, that can be browsed by swiping left or right. The carousel showcases multiple items in a horizontal scrolling format with only one item visible at a time. In addition to swipe gestures, navigation identifiers are included in dots or a counter. The dots/counter indicates the current position within the carousel.

Core structure | |
---|---|
data | The carousel requires a data source that will be used in the component to return the content, for, example, images or avatars. Any of the Data Providers can be referenced to return the data. |
instanceId | The unique identifier for the carousel. |
type |
Other options | |
---|---|
counter | Set to true addes a counter to the top right corner of the carousel in the style similiar to 1/4 to indicate the number of images or cards in the carousel. set to false hides the counter. The counter and pagination can be used together or individually depending on the requirement. |
isContained | Set to true places the content (type) in a container which creates a visually appealing frame around the content. Set to false the content fills the entire carousel. |
pagination | Pagination is shown as dots at the bottom of the carousel. The following options exist:
|
- Styling, functionality, events can be configured on the type component, for example, onPress or height settings.
- The carousel uses the same approach as the list component when working with data, making it easy to configure using the [email protected] expression.
- Planning the layout of the carousel before you configure the component will save time, and ensure the correct component type is used.
- Consider limiting the number of images used for the carousel to have maximum effect.
- The card component is versatile, allowing you to combine multiple components into the carousel. For an example, see the carousel with card containing avatars, expander & location.
The carousel in this example uses with a colored card component. In the card component the avatar and entity-field components are configured.
Example: See the example in GitHub
