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

antd的走马灯组件根据react-slick组件而来，可参考react-slick的说明：react-slick.neostack.com/

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;

大工告成了!