slide - Maixbxp/salt-ui GitHub Wiki
轮播组件
<Slide showNav={true}
auto={true}
active={2}
onMount={this.onMount.bind(this)}
onSlideEnd={this.onSlideEnd.bind(this)}
onSlideClick={this.onSlideClick.bind(this)>
<div className="t-image-slide-item" style={{backgroundImage: "1.jpg"}}>
<span className="t-FCf t-OP0">随便写点东西</span>
</div>
<div className="t-image-slide-item" style={{backgroundImage: "1.jpg"}}>
<span className="t-FCf t-OP0">随便写点东西</span>
</div>
<div className="t-image-slide-item" style={{backgroundImage: "1.jpg"}}>
<span className="t-FCf t-OP0">随便写点东西</span>
</div>
<div className="t-image-slide-item" style={{backgroundImage: "1.jpg"}}>
<span className="t-FCf t-OP0">随便写点东西</span>
</div>
<div className="t-image-slide-item" style={{backgroundImage: "1.jpg"}}>
<span className="t-FCf t-OP0">随便写点东西2</span>
</div>
</Slide>- 描述：自定义样式的
class名称。 - 类型：
String - 默认：
'' - 必选：否
示例：
<Slide className="customClass">
...
</Slide>- 描述：Slide 的高度
- 类型：
StringorNumber - 默认：
null - 必选：否
示例：
<Slide height={100}>
...
</Slide>- 描述：开始轮播的 item 序号
- 类型：
Number - 默认：
0 - 必选：否
示例：
<Slide active={3}>
...
</Slide>- 描述：是否自动播放
- 类型：
Boolean - 默认：
false - 必选：否
示例：
<Slide auto={true}>
...
</Slide>- 描述：是否循环播放
- 类型：
Boolean - 默认：
true - 必选：否
示例：
<Slide loop={false}>
...
</Slide>- 描述：是否显示导航用的小点
- 类型：
Boolean - 默认：
false - 必选：否
示例：
<Slide showNav={true}>
...
</Slide>- 描述：内容变更的时候触发的callback
- 类型：
Function - 默认：
null - 必选：否
示例：
<Slide onMount={()=>{alert('Mounted!')}}>
...
</Slide>- 描述：切换轮播图之后触发的callback，接受一个参数
option，可以通过option获取到改变后的index - 类型：
Function - 默认：
null - 必选：否
示例：
<Slide onSlideEnd={(option)=>{alert('Current index is:' + option.index)}}>
...
</Slide>- 描述：点击轮播图之后触发的callback，接受一个参数
option，可以通过option获取到改变后的index - 类型：
Function - 默认：
null - 必选：否
示例：
<Slide onSlideClick={(option)=>{alert('Clicked index is:' + option.index)}}>
...
</Slide>