1.0.11 • Published 5 months ago
@xuda.io/xuda-ui-plugin-sortable v1.0.11
Xuda Swiper Plugin
The Xuda Swiper Plugin integrates the Swiper slider library into the Xuda platform, allowing you to build interactive, responsive, and touch-friendly carousels within your UI.
Features
- Horizontal or Vertical: Choose the slide direction to fit your layout needs.
- Looping and Autoplay: Continuously cycle through slides or automatically advance them after a set delay.
- Various Effects: Enhance transitions with different effects, including slide, fade, cube, coverflow, and flip.
- Conditional Properties: Certain effect-specific properties only appear when that effect is selected, simplifying the interface.
- Navigation and Pagination: Add 'next' and 'prev' arrows, pagination bullets, fractions, or progressbars for intuitive navigation.
- Mousewheel and Grab Cursor: Enable mousewheel control and a grab cursor for more engaging interactions.
Usage in Xuda Studio
- Open Xuda Studio: Visit Xuda.io and open your project.
- Select a Component: Choose the component where you'd like to integrate the Swiper slider.
- Configure Properties: Adjust the slider settings, such as direction, effect, autoplay, pagination, and more.
- Preview Changes: See results in real-time as you tweak properties, ensuring the slider matches your desired look and feel.
Properties Overview
| Property | Type | Description | Default Value | Condition |
|---|---|---|---|---|
direction | string | Set the slider direction (horizontal or vertical). | horizontal | |
loop | boolean | Enable continuous loop mode. | false | |
speed | number | Transition duration between slides (ms). | 300 | |
slidesPerView | number | Number of slides visible in a single view. | 1 | |
spaceBetween | number | Space between slides in pixels. | 10 | |
effect | string | Transition effect between slides (slide, fade, cube, coverflow, flip). | slide | |
cubeEffect_shadow | boolean | Enable/disable shadow effect in cube transitions. | true | Only if effect = cube |
cubeEffect_slideShadows | boolean | Show slide shadows in cube effect transitions. | true | Only if effect = cube |
cubeEffect_shadowOffset | number | Adjust cube shadow distance. | 20 | Only if effect = cube |
cubeEffect_shadowScale | number | Scale of the cube shadow. | 0.94 | Only if effect = cube |
coverflowEffect_rotate | number | Degrees to rotate slides in coverflow effect. | 50 | Only if effect = coverflow |
coverflowEffect_stretch | number | Multiplies space between slides in coverflow. | 0 | Only if effect = coverflow |
coverflowEffect_depth | number | Depth offset for slides in 3D space in coverflow. | 100 | Only if effect = coverflow |
coverflowEffect_modifier | number | Multiplier affecting coverflow transforms. | 1 | Only if effect = coverflow |
coverflowEffect_slideShadows | boolean | Enable/disable slide shadows in coverflow mode. | true | Only if effect = coverflow |
autoplay | boolean | Automatically advance slides after a delay. | false | |
autoplayDelay | number | Delay between slides in autoplay mode (ms). | 3000 | Only applicable if autoplay = true |
navigation | boolean | Show 'next' and 'prev' navigation arrows. | true | |
navigation_custom_elements | boolean | If enabled, define custom elements with 'swiper-button-next' and 'swiper-button-prev'. | false | Only if navigation = true |
pagination | boolean | Show pagination (bullets, fraction, or progressbar). | true | |
custom_pagination_element | boolean | If enabled, predefine .swiper-pagination element in layout. | false | |
pagination_type | string | Pagination style (progressbar, bullets, or fraction). | progressbar | Only if pagination = true |
pagination_clickable | boolean | Enable clickable pagination bullets for direct navigation. | false | |
scrollbar | boolean | Show a draggable scrollbar. | false | |
mousewheel | boolean | Control slides using the mouse wheel. | false | |
grabCursor | boolean | Display a grab cursor when hovering over the slider. | false |
Notes
- Conditional Properties: Properties related to
cubeEffectorcoverflowEffectare only visible when those effects are selected, reducing UI clutter. - Autoplay and Pagination: Autoplay and pagination can be combined to create a hands-free, guided tour of your slides.
- Custom Elements: By enabling custom navigation or pagination elements, you can control the exact positioning and styling of these controls in your layout.
Further Resources
- Swiper Official Documentation for advanced API usage, modules, and configuration.
- Xuda Documentation to learn more about working with plugins and extending UI capabilities in the Xuda platform.