Swiper

The Swiper component is a component that allows you to build a simple swiper.

Install and import

yarn add @welcome-ui/swiper @xstyled/styled-components @xstyled/system react react-dom styled-components
import { Swiper } from '@welcome-ui/swiper'

Default

With next and prev buttons

Providing renderNextButton and renderPrevButton enables prev and next navigation with the component you're returning from the callback.

With loop enabled

Providing loop enables the swiper to loop the last and first page.

With custom pagination items

By providing the optional renderPaginationItem you can customise the defaults pagination bullets and render your own component. This callback takes two params: index and props which is an object containning an onClick callback to pass to your custom bullet and an active prop which is true when the bullet index matches the current page index.

Properties

NameType(s)DefaultRequired
children
node
keyPrefix
string
swiper
loop
bool
renderNextButton
func
renderPaginationItem
func
renderPrevButton
func

Dependencies

Peer dependencies