React - AntD 走马灯组件前后切换面板

1.先用AntD的图标来当做轮播图点击的两个按钮，并将Carousel与按钮放在一个父级下。

轮播图切换按钮

<div className="home-lunbo">
  <Carousel {...lunboSetting} ref={el => (this.slider = el)}>
    <div key={1}><h3>1</h3></div>
    <div key={2}><h3>2</h3></div>
    <div key={3}><h3>3</h3></div>
    <div key={4}><h3>4</h3></div>
  </Carousel>
   <Icon type="left-circle"onClick={this.prev}/>
  <Icon type="right-circle" onClick={this.next}/>
</div>

2.轮播图的配置lunboSetting写法

const lunboSetting = {
  dots: true,
  lazyLoad: true,
  autoplay:true
 };

3.轮播图两个切换函数

constructor(props) {
  super(props);
  this.next = this.next.bind(this);
  this.prev = this.prev.bind(this);
}
next() {
  this.slider.slick.slickNext();
}
prev() {
  this.slider.slick.slickPrev();
}

整个页面代码

import React, {Component} from 'react';
import {Carousel, Input, Tabs, Icon} from 'antd';

class Home extends Component {
    constructor(props) {
        super(props);
        this.next = this.next.bind(this);
        this.prev = this.prev.bind(this);
    }
    next() {
        this.slider.slick.slickNext();
    }
    prev() {
        this.slider.slick.slickPrev();
    }
    render() {
        const lunboSetting = {
            dots: true,
            lazyLoad: true,
            autoplay:true,
        };
        return (
            <div className="home-lunbo">
                <Carousel {...lunboSetting} ref={el => (this.slider = el)}>
                    <div key={1}><h3>1</h3></div>
                    <div key={2}><h3>2</h3></div>
                    <div key={3}><h3>3</h3></div>
                    <div key={4}><h3>4</h3></div>
                </Carousel>
                <Icon type="left-circle"onClick={this.prev}/>
                <Icon type="right-circle" onClick={this.next}/>
            </div>
        )
    }
}

export default Home;

大工告成了!