react寫一個(gè)簡(jiǎn)單的slide效果求助

我寫這個(gè)輪播的思路是通過(guò)改變left值來(lái)達(dá)到滾動(dòng)的效果，
但現(xiàn)在遇到一個(gè)問(wèn)題，該怎么去判斷輪播已經(jīng)滑倒底了？
（我的想法是通過(guò)index來(lái)計(jì)數(shù)，但是發(fā)現(xiàn)index會(huì)總是和點(diǎn)擊的次數(shù)值不一致？慢兩拍）
輪播的結(jié)構(gòu)大該是這樣的：

constructor(props) {
        super(props);
        this.state = {
           
            leftV: 0,
            index: 0
        }
    }
    right() {
        const left = document.getElementById("slideContainer").offsetLeft;
        
        this.setState((prevState) => ({
            leftV: left - 270,
            index: prevState.index+1
        }));
       
    }
    left() {
        const right = document.getElementById("slideContainer").offsetLeft;
        
        this.setState((prevState) => ({
            leftV: right + 270,
            index: prevState.index-1
        }));
        
    }

<div className="slideWrap">
    <div className="leftArrow" onClick={this.left}></div>
    <div className="rightArrow" onClick={this.right}></div>
    <ul style={{left:this.state.leftV}}>
        {
           this.state.arr.map((item,index) => {
                return (
                    <li>//內(nèi)容</li>
                );
           })
        }
    </ul>
</div>