Swiper

v2.0.2
duplicate

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 item
  • pageIdx: 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

NameType(s)DefaultRequired
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

Peer dependencies