antd走马灯组件自定义前进后退按钮【ts + react】

antd的Carousel没有提供前进后退按钮需要自己根据文档 实现此功能

官方提供了next 和prev两个方法

next() 切换到下一面板 prev() 切换到上一面板

代码如下：

import React from "react"; import "./Detail.less"; import { Carousel,Image } from 'antd'; import {LeftOutlined,RightOutlined} from "@ant-design/icons" //引入底部组件 class Detail extends React.Component<any, any>{ private img: any; constructor(props:any){ super(props); this.state={}; this.img = undefined } prev(){ this.img.prev(); } next(){ this.img.next(); } render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined { let {location} = this.props; return ( <div className={'ContentBox'}> <div className={'CarouselBox'}> <div className={"CarouselIcon"} onClick={this.prev.bind(this)}><LeftOutlined /></div> <Carousel autoplay className={'Carousel'} ref={dom => { this.img = dom; }}> <div><img src={require('../../assets/images/Home/banner1.png')} alt=""/></div> <div><img src={require('../../assets/images/Home/banner2.png')} alt=""/></div> <div><img src={require('../../assets/images/Home/banner3.png')} alt=""/></div> <div><img src={require('../../assets/images/Home/banner4.png')} alt=""/></div> </Carousel> <div className={"CarouselIcon"} onClick={this.next.bind(this)}><RightOutlined /></div> </div> </div> ); } } export default Detail