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

1. Open Xuda Studio: Visit Xuda.io and open your project.
2. Select a Component: Choose the component where you'd like to integrate the Swiper slider.
3. Configure Properties: Adjust the slider settings, such as direction, effect, autoplay, pagination, and more.
4. 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.