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 |