Skip to main content
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:
NamePropertyDescription
Slides Per ViewslidesPerViewNumber of slides per view (slides visible at the same time on slider’s container).
Space BetweenspaceBetweenDistance between slides in px.
CenteredcenteredSlidesActive slide will be centered, not always on the left side.
Directiondirection’horizontal’ / ‘vertical’
Grab CursorgrabCursorThis option may a little improve desktop usability. If true, user will see the “grab” cursor when hover on Swiper
LooploopSet to true to enable continuous loop mode.
EffecteffectTransition effect. Can be ‘slide’, ‘fade’, ‘cube’, ‘coverflow’, ‘flip’ or ‘creative’
Creative EffectcreativeEffectObject 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:
NameDescriptionDetails
Component Type1. Indicator Card; 2. Analysis Card;
Detail ConfigurationOpen the specific configuration interface for the specified component type
ActionsDelete button, delete current row slide configuration

Autoplay

Autoplay property list:
NamePropertyDescription
DelaydelayDelay time for each transition
Disable on InteractiondisableOnInteraction
Pause on Mouse EnterpauseOnMouseEnter
ReversereverseDirection
Stop on Last SlidestopOnLastSlide
Wait for TransitionwaitForTransition

Pagination

Pagination property list:
NamePropertyDescription
Enabledenabled
Typetype’bullets’ / ‘fraction’ / ‘progressbar’
ClickableclickableClicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type
Hide on ClickhideOnClick
Dynamic BulletsdynamicBullets
Corresponds to Swiper Pagination Parameters property configuration.

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:
NamePropertyDescription
SizesizeWhen window width is >= [size]px
Slides Per ViewslidesPerViewSame as slider properties
Space BetweenspaceBetweenSame as slider properties
Touch RatiotouchRatioTouch sensitivity
ActionsDelete configuration
Corresponds to Initialize Swiper breakpoints property configuration.

示例