引用组件import {Carousel, Icon} from ‘antd’; render返回组件标签等：
<div className="modal_box"> <Icon type="left" theme="outlined" style={{ fontSize: '30px'}} onClick={this.handlePrev}/> <Carousel afterChange={this.onChange} ref='img' style={{ margin:"0px 15px"}}> <div className="carousel_img"> <img src={finished} alt=""></img> </div> <div className="carousel_img"> <img src={danger} alt=""></img> </div> <div className="carousel_img"> <img src={good} alt=""></img> </div> <div className="carousel_img"> <img src={worning} alt=""></img> </div> </Carousel> <Icon type="right" theme="outlined" style={{ fontSize: '30px'}} onClick={this.handleNext}/> </div>方法调用
handlePrev = ()=>{ this.refs.img.prev(); //ref = img } handleNext = ()=>{ this.refs.img.next(); }样式，一定要给轮播图一个宽度，否则轮播图的宽度溢出，无法使组件保持水平
.modal_box{ width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; } .ant-carousel{ width: 85%; }效果图：
