react-dynamic-swiper
React wrapper for iDangerous-Swiper that auto-magically reinitializes and updates when configuration changes.
Installation
$ npm i --save react-dynamic-swiper
Usage
// Basic Usage { return <Swiper swiperOptions= slidesPerView: 42 navigation=false pagination=false > <Slide onActive= console /> </Swiper> } // Advanced Usage//// Swiper will automatically update swiper instance when children change (i.e. Slides),// and/or re-initialize if swiper options change. Also, event handlers// (`onTouchMove`, `onSlideChangeEnd`, etc.) are delegated. Changing them will// require no reinitialization, while still functioning as expected. { superprops context thisstate = slides: } { } { const slides = thisstate return <Swiper swiperOptions= slidesPerView: 'auto' nextButton=<MyNextButton /> prevButton= <MyPrevButton onClick= swiper /> onTouchMove= > slides </Swiper> }
API
Swiper
Props
- swiperOptions (Object) Options passed to swiper instance.
- wrapperClassName (String) Classname for underlying wrapper element.
- navigation (Boolean) Display navigation elements (
true
) - nextButton (Element|Function) Navigation next element (
<div className="swiper-button-next" />
) - prevButton (Element|Function) Navigation previous element (
<div className="swiper-button-prev" />
) - pagination (Boolean|Element|Function) Pagination is active by default, use
false
to hide. (<div className="swiper-pagination" />
) - paginationClickable (Boolean) Enable clickable pagination.
- scrollBar (Boolean|Element|Function) Scrollbar is hidden by default, use
false
to show. - onInitSwiper (Function) Function invoked every time swiper instance is initialized, invoked will
swiper
as first argument. - All event handlers are supported as well (i.e. onTouchMove, etc.)
note: The following props can be functions: nextButton, prevButton, pagination, and scrollBar. If functions, they
will be invoked with the underlying Swiper
instance as the one and only argument. They must return a renderable element.
Methods
- swiper() Returns underlying swiper instance.
Slide
Props
- onActive (Function) Invoked with swiper instance when
Slide
is active. Not invoked on initialization.