ant design pro 轮播图加prev()和next()

效果如图：

代码：

方法：

handlePrev = ()=>{
    this.refs.img.prev(); //ref = img
  }
  handleNext = ()=>{
    this.refs.img.next();
  }
  handleWxLook = (val) =>{
    this.setState({
      visible: true,
    });
  }
  onChange =(a, b, c)=>{
    console.log(a, b, c);
  }  

  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }

  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }

return()函数中：

.box{
  display: flex;justify-content: center;align-items: center;padding: 0 10px;
}

<Modal 
          title="微信端照片"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
        <div className={styles.box}>
          <Icon type="left" theme="outlined" style={{ fontSize: '30px'}} onClick={this.handlePrev}/>
          <Carousel afterChange={this.onChange} ref='img'>
            <div><h3>1</h3></div>
            <div><h3>2</h3></div>
            <div><h3>3</h3></div>
            <div><h3>4</h3></div>
          </Carousel>
          <Icon type="right" theme="outlined"  style={{ fontSize: '30px'}} onClick={this.handleNext}/>
        </div>
        </Modal>