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.