Swiper
The Swiper component is a component that allows you to build a simple swiper.
Install and import
Default
Slides to show
The number of slides that are visible in one view. Note: On mobile this is always 1
With next and prev buttons
Providing nextButton and prevButton enables prev and next navigation with the component you're returning from the callback.
Controlling externally
You can create your own buttons outside of the Swiper and control it externally.
Autoplay
Providing autoplay lets the slides advance automatically. Pass duration to control the amount of time each slide shows for.
With custom pagination items
By providing the optional renderPaginationItem you can customise the defaults pagination bullets and render your own component. This callback takes a props param which is an object containning:
idx: the current pagination itempageIdx: the currently selected slide (which you can use to show the active state for your pagination items)onClick: callback to pass to your custom bullet
Properties
| Name | Type(s) | Default | Required |
|---|---|---|---|
| autoplay | bool | ||
| children | node | ||
| dataTestId | string | ||
| duration | number | ||
| goNext | func | ||
| goPrev | func | ||
| id | string | ||
| loop | bool | ||
| nextButton | node | ||
| numberOfSlides | number | ||
| pageIdx | number | ||
| prevButton | node | ||
| renderPaginationItem | func | ||
| setNumberOfSlides | func | ||
| setPageIdx | func | ||
| slidesToShow | number | ||
| slidesToSwipe | number |
Dependencies
- - @welcome-ui/system^3.0.0
Peer dependencies
- - @xstyled/styled-components^2.2.3
- - @xstyled/system^2.2.3
- - react^16.10.2 || ^17.0.1
- - react-dom^16.10.2 || ^17.0.1
- - styled-components^5.2.1