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 (
        

            
 { myRef?.current?.prev?.() }}><
            
 { myRef?.current?.next?.() }}>>
            
                

                    
111
                
                

                    
222
                
                

                    
333
                
                

                    
444
                
            
        

    )
}

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