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
function MySwiper() {
return (
<Swiper
swiperOptions={{
slidesPerView: 42,
}}
navigation={false}
pagination={false}
>
<Slide onActive={swiper => console.log('Slide Active!')}/>
</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.
import React, { Component } from 'react'
import { Swiper, Slide } from 'react-dynamic-swiper'
import 'react-dynamic-swiper/lib/styles.css'
class MySwiper extends Component {
constructor(props, context) {
super(props, context)
this.state = {
slides: []
}
}
componentWillMount() {
getAsyncSlideData()
.then(slides => this.setState({ slides }))
}
render() {
const { slides } = this.state
return (
<Swiper
swiperOptions={{
slidesPerView: 'auto',
}}
nextButton={<MyNextButton/>}
prevButton={swiper => <MyPrevButton onClick={() => swiper.slideNext()} />}
onTouchMove={(swiper, event) => doSomething()}
>
{slides.map(slide => (
<Slide {...slide}/>
))}
</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" />
) - nextButton (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" />
) - 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.