Documentation Index
Fetch the complete documentation index at: https://docs.xpertai.cn/llms.txt
Use this file to discover all available pages before exploring further.
The slider widget uses the Swiper library to display scrolling effects for component cards.
In the story editing interface, click “Slider Widget” in the toolbar’s insert area to create a slider widget on the current page. After selecting this component, edit its settings in the property editing panel on the right:
Slider Properties
The overall property settings of the slider widget correspond to the properties in the Swiper library.
Property list:
| Name | Property | Description |
|---|
| Slides Per View | slidesPerView | Number of slides per view (slides visible at the same time on slider’s container). |
| Space Between | spaceBetween | Distance between slides in px. |
| Centered | centeredSlides | Active slide will be centered, not always on the left side. |
| Direction | direction | ’horizontal’ / ‘vertical’ |
| Grab Cursor | grabCursor | This option may a little improve desktop usability. If true, user will see the “grab” cursor when hover on Swiper |
| Loop | loop | Set to true to enable continuous loop mode. |
| Effect | effect | Transition effect. Can be ‘slide’, ‘fade’, ‘cube’, ‘coverflow’, ‘flip’ or ‘creative’ |
| Creative Effect | creativeEffect | Object with Creative-effect parameters. |
Slides
The slides table configuration is a table for configuring the slider widget. Click the Add button below the table to add a new row, which is a new slider widget. Each card row configuration properties are as follows:
- Component Type: The component type used by the card. Currently supported:
- Analysis Card: Corresponds to the chart analysis component;
- Indicator Card: Corresponds to the indicator card component;
- Details: Perform corresponding detailed configuration for the selected component type. Refer to the corresponding component type configuration for details;
- Actions: Delete the current configuration row;
Slide property list:
| Name | Description | Details |
|---|
| Component Type | | 1. Indicator Card; 2. Analysis Card; |
| Detail Configuration | Open the specific configuration interface for the specified component type | |
| Actions | Delete button, delete current row slide configuration | |
Autoplay
Autoplay property list:
| Name | Property | Description |
|---|
| Delay | delay | Delay time for each transition |
| Disable on Interaction | disableOnInteraction | |
| Pause on Mouse Enter | pauseOnMouseEnter | |
| Reverse | reverseDirection | |
| Stop on Last Slide | stopOnLastSlide | |
| Wait for Transition | waitForTransition | |
| Name | Property | Description |
|---|
| Enabled | enabled | |
| Type | type | ’bullets’ / ‘fraction’ / ‘progressbar’ |
| Clickable | clickable | Clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type |
| Hide on Click | hideOnClick | |
| Dynamic Bullets | dynamicBullets | |
Responsive Breakpoints
Responsive breakpoint properties allow setting different parameters for different responsive breakpoints (screen sizes). Not all parameters can be changed at breakpoints; only those that don’t require different layouts and logic, such as slidesPerView, slidesPerGroup, spaceBetween, grid.rows. Parameters such as loop and effect will not take effect.
Responsive breakpoint property list:
| Name | Property | Description |
|---|
| Size | size | When window width is >= [size]px |
| Slides Per View | slidesPerView | Same as slider properties |
| Space Between | spaceBetween | Same as slider properties |
| Touch Ratio | touchRatio | Touch sensitivity |
| Actions | | Delete configuration |
