antd跑马灯实现左右箭头切换(React版本)

我们在查找antd官网，使用轮播图的时候，发现左右点击切换轮播图被去掉了，这个功能也没有。既然没有那就实现一个吧。

效果：

react部分代码

import React, { useRef } from 'react'
import { Carousel } from 'antd';
import styles from './index.less'

const Screen = () => {
    const myRef = useRef(null);
    return (
        <div className={styles.wrap}>
            <div className={styles.btnLeft} onClick={() => { myRef?.current?.prev?.() }}>&lt;</div>
            <div className={styles.btnRight} onClick={() => { myRef?.current?.next?.() }}>&gt;</div>
            <Carousel autoplay effect="fade" ref={myRef} dots={false}  >
                <div>
                    <div key={'1'} className={styles.content1} >111</div>
                </div>
                <div>
                    <div key={'2'} className={styles.content2} >222</div>
                </div>
                <div>
                    <div key={'3'} className={styles.content3} >333</div>
                </div>
                <div>
                    <div key={'4'} className={styles.content4} >444</div>
                </div>
            </Carousel>
        </div>

    )
}

export default Screen

index.less

.wrap {
    height: 100vh;
    position: relative;

    :global(.ant-carousel .slick-prev,
        .ant-carousel .slick-next,
        .ant-carousel .slick-prev:hover,
        .ant-carousel .slick-next:hover) {
        font-size: inherit;
        color: currentColor;
    }

    .content1 {
        margin: 0;
        height: 100vh;
        color: white;
        text-align: center;
        background: #364d79;
        line-height: 100vh;
    }

    .content2 {
        margin: 0;
        height: 100vh;
        color: white;
        text-align: center;
        background: #364d79;
        line-height: 100vh;

    }

    .content3 {
        margin: 0;
        height: 100vh;
        color: white;
        text-align: center;
        background: #364d79;
        line-height: 100vh;

    }

    .content4 {
        margin: 0;
        height: 100vh;
        color: white;
        text-align: center;
        background: #364d79;
        line-height: 100vh;

    }


    .btnLeft {
        position: absolute;
        top: 50%;
        left: 15px;
        color: white;
        font-size: 40px;
        z-index: 10;
        cursor: pointer;
    }

    .btnRight {
        position: absolute;
        top: 50%;
        right: 15px;
        color: white;
        font-size: 40px;
        z-index: 10;
        cursor: pointer;
    }
}