antd走马灯组件自定义前进后退按钮

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