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