通过数组元素的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>
    )
}