0.0.3 • Published 6 years ago

wj-slider3d v0.0.3

Weekly downloads
14
License
-
Repository
github
Last release
6 years ago

1. install

npm install wj-slider3d

2. import

import Slider3d from 'wj-slider3d'

3. props

propstypeisRequireddefaultdesc
defaultPagenumberfalse0默认展示页面
widthnumberfalse200
heightnumberfalse200
autoPlaynumberfalse200不自动轮播,该值设置成0
speednumberfalse1000轮播速度
onWillChangefuncfalse(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>
    );
  }
}