最简单的react+typescript无缝轮播图

1.布局

<div className="warp">
        <div className="warp-slider">
          <div className="slider-item" ref={this.res}>
            {this.list.map((item) => (
              <div>{item} </div>
            ))}
          </div>
        </div>
      </div>

2.less

.warp {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
        .warp-slider {
            display: flex;
            position: absolute;
            overflow: hidden;
            height: 81%;
            width: 100vw;
            .slider-item {
                transition: 0.3s all;
                display: flex;
                position: absolute;
                left: 0vw;
                height: 81%;
                >div:nth-child(2n-1) {
                    background-color: #f0a;
                }
                >div:nth-child(2n) {