tnt-swiper
v1.0.2
Published
react banner幻灯片组件
Downloads
1
Readme
react banner幻灯片组件
#Development npm i && npm test
#Usage
var TntSwiper = require('tnt-swiper');
var React = require('react');
var ReactDOM = require('react-dom');
const images = [
{
src : "http://tupian.qqjay.com/u/2017/0103/2_234332_2.jpg"
},
{
src : "http://tupian.qqjay.com/u/2017/0103/2_234332_2.jpg"
},
{
src : "http://tupian.qqjay.com/u/2017/0103/2_234332_2.jpg"
},
{
component : <div className="test"><p>11111</p></div>
}
]
ReactDOM.render(
<TntSwiper
images={images}
/>
, document.getElementById('app'));
#API
##props
| name | type | default | description |
| pagination | bool | true | 是否显示分页器 |
| paginationType | string | bullets | 分页器样式 bullets/fraction/progress |
| style | object | {} | 组件容器样式 |
| onChange | function(val:number) | | 滑动结束事件 |
| prefixCls | string | tnt-switch | 样式前缀用于重写样式 |
| startSlide | number | 0 | 初始化页数 |
| onClick | function(val:number) | | 点击事件 |
| transitionEnd | function(val:number,ele:element) | | 滑动动画结束事件 |
| images | array | | 图片 [{src:图片,component:组件}...] |
| speed | number | 300 | 动画速度 |
| auto | number | 7000 | 动画自动播放速度 0为不自动播放 |
| loop | bool | true | 是否循环 |