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