0.0.1 • Published 5 years ago
sinobest-rc-image-show v0.0.1
sinobest-rc-image-show
图片展示模块,包括区域图片滑动轮播模式或瀑布流模式。
Install
yarn add sinobest-rc-image-show
Use
import React, { Component } from 'react';
import { SinoImageShow } from 'sinobest-rc-image-show';
export default class ImageShowDemo extends Component {
render() {
const data = [
{
name: '图1',
path: 'xxxx.png'
},
{
name: '图2',
path: 'xxxx.png'
},
{
name: '图3',
path: 'xxxx.png'
}, {
name: '图4',
path: 'xxxx.png'
}
];
return (
<div>
<SinoImageShow mode='slider' data={data} width={700} height={500} slidesToShow={1} slidesToScroll={1} />
</div>
);
}
}
API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
mode | 图片展示模式,可选区域图片滑动轮播模式slider或瀑布流模式waterfall | String | 'slider' |
data | 图片数据 | Array | - |
fullscreenView | 是否开启图片点击全屏查看功能 | Boolean | true |
width | 容器宽度,只支持slider模式 | Number | 600 |
height | 容器高度,只支持slider模式 | Number | 400 |
lazyLoad | 是否开启懒加载,暂时只支持slider模式 | Boolean | true |
arrows | 显示箭头,只支持slider模式 | Boolean | true |
draggable | 开启拖拽,只支持slider模式 | Boolean | false |
infinite | 图片无限循环,只支持slider模式 | Boolean | false |
speed | 图片切换动画时间(毫秒),只支持slider模式 | Number | 500 |
slidesToShow | 区域图片展示数量,只支持slider模式 | Number | 1 |
slidesToScroll | 单次图片切换数量,只支持slider模式 | Number | 1 |
autoplay | 开启自动轮播,只支持slider模式 | Boolean | false |
autoplaySpeed | 自动轮播速度(毫秒),只支持slider模式 | Number | 3000 |
pauseOnHover | 自动播放开启时,鼠标停留在图片时暂停自动轮播,只支持slider模式 | Boolean | false |