Carousel
Purpose
The Carousel
component allows you to show a collection of images in a cyclic view. By displaying only a subset of images, the screen space is optimized. The navigation items, such as arrows, suggest additional content that is not currently visible, which encourages the user to continue exploring.
Properties
Property | Type | Description | Required | Default value |
---|---|---|---|---|
children | Array of Element | Show text | Yes | - |
Element
The Element
component is part of the carousel. It refers to each element of the carousel and contains a title, a subtitle, an image and a button.
Property | Type | Description | Required | Default value |
---|---|---|---|---|
children | Botonic Components (Title, Subtitle, Pic, Button) | Define button elements | Yes | - |
Element Subcomponents
Title
The Title
component is used to give a title to each carousel’s element.
Property | Type | Description | Required | Default value |
---|---|---|---|---|
children | String | Show the title | Yes | - |
style | String or number | Define the style of the title | No | font-size 14px |
Subtitle
The Subtitle
component is used to add a description of each carousel’s element.
Property | Type | Description | Required | Default value |
---|---|---|---|---|
children | String | Show the subtitle | No | - |
style | String or number | Define the style of the subtitle | No | color: gray, font-size: 12px |
Pic
The Pic
component is used in a carousel to better visualize the conversation and draw attention with the help of an image.
Property | Type | Description | Required | Default value |
---|---|---|---|---|
src | URL | Show the image | Yes | - |
Example
To get this kind of carousel:

You can render it following the structure below:
Customize or disable arrows on both sides of the carousel
You can disable or customize arrows displayed on the left and right sides of a carousel.

To do so:
- Add the following code in
src/webchat/index.js
:
- Add the following code in
src/webchat/custom-carousel-arrows.js
:
Note: scrollCarouselBy
allows you to define the carousel's movement distance in pixels when clicking on the arrow.