0.2.8 • Published 5 years ago
sinobest-rc-image-show-test v0.2.8
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 |
0.2.8
5 years ago
0.2.7
5 years ago
0.2.6
5 years ago
0.2.4
5 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.9
5 years ago
0.1.8
5 years ago
0.1.6
5 years ago
0.1.5
5 years ago
0.1.4
5 years ago
0.1.3
5 years ago
0.1.2
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago
0.0.9
5 years ago
0.0.8
5 years ago
0.0.7
5 years ago
0.0.6
5 years ago
0.0.5
5 years ago
0.0.4
5 years ago
0.0.2
5 years ago
0.0.1
5 years ago