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