React加ts左右切换轮播

结构

     <div className='swiper'>
            <button className='button1' onClick={doclicks}>后退</button>
            <div className='swiper-box' ref={Box}>
                <div className='swiper-items'>1</div>
                <div className='swiper-items'>2</div>
                <div className='swiper-items'>3</div>
                <div className='swiper-items'>4</div>
            </div>
            <button className='button2' onClick={doclick}>前进</button>
        </div>

样式

.swiper {
    width: 750px;
    height: 20vh;
    background-color: pink;
    overflow: hidden;
    position: relative;

    .button1 {
        position: absolute;
        z-index: 1;
        width: 60px;
        height: 15