react-mobile-swiper
a simple react-swiper component https://hardtogit.github.io/react-mobile-swiper/example/build/index.html
## get start Demo
clone or down this projectcd examplenpm installnpm start
how to use
Example with defaults
install
npm intsall --save react-mobile-swiper
Creating an example component:
;;const animateTypes=SwiperanimateTypes; extents Component { return <Swiper type=animateTypesDEFAULT loop> <div><img src=''/></div> <div><img src=''/><div> </Swiper> ; };;
Config Props:
IndexPropTypes= index:PropTypesnumber //初始值 height:PropTypesisRequired duration:PropTypesnumber //动画完成周期 distance:PropTypesnumber //触发切换的距离 loop:PropTypesbool //是否循环播放 autoPlay:PropTypesbool //是否自动播放 interval:PropTypesnumber //轮播间隔秒数 type:PropTypesstring //轮播类型 默认支持animateType typePro:PropTypesbool //需要同屏显示3个slide的时候设置为true. 例如type设置成 animatetype.CARD时 pagination:PropTypesbool//是否显示分页 onSlideChange:PropTypesfunc //slide切换回调 createStyle:PropTypesfunc //样式生成器,可自行传入;//样式生成器是一个纯函数。用于返回上一,当前,下一slide的样式。默认animateTypes.DEFAULT的配置如下:(注:当typePro设置为true时,为了更好的体验,<br/>需返回,上上张,下下张的样式,即stage==='prePro'stage==='nextPro') {//接收参数依次为动画类型,slide状态,滑动距离,动画执行时间