@xuda.io/xuda-ui-plugin-draggabilly NPM

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 cubeEffect or coverflowEffect are 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.