Swiper
Allows user to build a simple swiper with images or contents.
version
5.15.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.
Without navigation #
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 #
Name | Type(s) | Default | Required |
---|