1.先用AntD的圖標(biāo)來當(dāng)做輪播圖點(diǎn)擊的兩個(gè)按鈕，并將Carousel與按鈕放在一個(gè)父級(jí)下。

輪播圖切換按鈕

<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.輪播圖兩個(gè)切換函數(shù)

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();
}

整個(gè)頁(yè)面代碼

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;

大工告成了!