0.0.3 • Published 6 years ago
wj-slider3d v0.0.3
1. install
npm install wj-slider3d
2. import
import Slider3d from 'wj-slider3d'
3. props
props | type | isRequired | default | desc |
---|---|---|---|---|
defaultPage | number | false | 0 | 默认展示页面 |
width | number | false | 200 | |
height | number | false | 200 | |
autoPlay | number | false | 200 | 不自动轮播,该值设置成0 |
speed | number | false | 1000 | 轮播速度 |
onWillChange | func | false | (nextPage) => {} | 将要切换页面的回调 |
4. 可用方法
切换轮播页
// direction oneOf(['prev', 'next'])
Slider3dRef.switchPage(direction);
5. 示例
import React from 'react';
import PropTypes from 'prop-types';
import Slider3d from 'wj-slider3d';
import 'wj-slider3d/dist/index.css';
export default class Layout extends React.Component {
static propTypes = {};
static defaultProps = {};
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {}
render() {
const itemStyle = {
width: '100%',
height: '100%',
};
const props = {
// defaultPage: 0,
width: 600,
height: 400,
autoPlay: 3000,
speed: 1000,
onWillChange: (nextPage) => {
console.log('nextPage==', nextPage);
},
};
return (
<div>
<Slider3d {...props}>
<div style={{...itemStyle, background: 'red'}}>1</div>
<div style={{...itemStyle, background: 'green'}}>2</div>
<div style={{...itemStyle, background: 'red'}}>3</div>
<div style={{...itemStyle, background: 'blue'}}>4</div>
</Slider3d>
</div>
);
}
}