> ## 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. # Slider Widget The slider widget uses the [**Swiper**](https://swiperjs.com/) 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**](https://swiperjs.com/) 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 | | ## Pagination Pagination property list: | 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 | | Corresponds to [Swiper Pagination Parameters](https://swiperjs.com/swiper-api#pagination) 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: | 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 | Corresponds to [Initialize Swiper breakpoints](https://swiperjs.com/swiper-api#param-breakpoints) property configuration. ## 示例