swiper-r
v0.1.3
Published
React swiper component based on swiper.js library
Downloads
16
Readme
swiper-r
Simple react component built-in using portal technique, which is just a tiny wrapper around idangero's swiper library ( http://www.idangero.us/ )
Install
$ npm install --save swiper-r
Usage
Config is just a plain js object, which represents the original config required by swiper js, for more information and available options, please check http://www.idangero.us/swiper/api/#
var config = {
pagination: '.swiper-pagination',
paginationClickable: true
};
<Swiper swiperConfig={ config }>
<img src="http://placehold.it/1000x400&text=slide1"/>
<img src="http://placehold.it/1000x400&text=slide2"/>
<img src="http://placehold.it/1000x400&text=slide3"/>
<img src="http://placehold.it/1000x400&text=slide4"/>
<img src="http://placehold.it/1000x400&text=slide5"/>
<img src="http://placehold.it/1000x400&text=slide6"/>
</Swiper>
Callbacks
use onSwiperMount and onSwiperUnmount callbacks to control inner swiper logic while using component.
onSwiperMount: function(swiper){
this.swiper = swiper;
},
onNextButtonClick: function(e){
this.swiper.slideNext();
}
Examples
There are 3 simple examples in demo folder, you can check more demos here.