javascript - CSS轮播/幻灯片动画通过数组元素

Question

我有数据从我的后端发送到我的前端，然后数据被解析并显示到一个表中。但是，在数组中元素的最大数量时，表格中的行太多，并且超出了我需要表格所在的区域。所以旋转木马/幻灯片动画将是最好的选择，我想成为能够一次显示 4 行元素，然后在接下来的 4 行中调用幻灯片动画。我不太确定如何在设置表数据的函数的当前迭代中执行此操作。有人可以指出我正确的方向吗？

function FormTable(props){
    /**
     * props = allStations
     */
   console.log(props.data)
    return(
        <table className="form__table">
            <div className="form__table-parentDiv">
                <thead>
                    <tr>
                        <th className="form__table-header">Departing Station</th>
                        <th className="form__table-header">Arriving Station</th>
                        <th colSpan={2} className="form__table-header">Departure Time</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        props.data.map( (stationIndex) => {
                            // console.log(stationIndex);
                            let cells = [];

                            for(let i = 1; i < stationIndex.length; i++){
                                cells.push(
                                    <React.Fragment>
                                        <td className="form__table-stations"> {stationIndex[i].station} </td>
                                        <td className="form__table-stations"> {stationIndex[i].destination} </td>
                                        <td className="form__table-arrivals"> {stationIndex[i].firstArrival} </td>
                                        <td className="form__table-arrivals">  {stationIndex[i].secondArrival} </td>
                                    </React.Fragment>
                                );
                            }

                            return <tr className="form__table-row" >{ cells }</tr>
                        })
                    }


                </tbody>
            </div>

        </table>
    )
}

标签： javascriptcssreactjs