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.
- 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.
- 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.
| 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 |
-
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.
- 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.