WUI logo

Swiper

Allows user to build a simple swiper with images or contents.

version

5.14.0

install

yarn add @welcome-ui/swiper

usage

import { Swiper, useSwiper } from '@welcome-ui/swiper'

Usage #

Slides per view #

Providing slidesPerView with { mobile: 1, tablet: 1, desktop: 2 } will show 1 slide per view on mobile and tablet and 2 slides per view on desktop.

First slide to show #

By providing firstSlideToShow with 2, the swiper will begin on the second slide.

Centered slides #

By providing centeredSlides, the swiper will begin on the middle slide, firstSlideToShow won't be used in this case.

Autoplay #

Providing autoplay lets the slides advance automatically. Pass duration to control the amount of time each slide shows for.

With pagination #

By providing the optional withPagination with { mobile: true, desktop: true }, you can activate the pagination on mobile/tablet and on desktop.

By providing the optional withNavigation with { mobile: false, desktop: false }, you can hide the navigation arrows on mobile/tablet and desktop, you still can scroll between slides.

With dark UI #

Use dark (black) colors for the pagination and arrows in case of slides too bright with withDarkUI props.

Properties #

NameType(s)DefaultRequired

Packages #

Dependencies #
Peer dependencies #

Previous

Card

Next

Table