如何为每个幻灯片滑块修复多个图像？ （反应）

Question

我正在尝试为每张幻灯片滑块创建多张图像，每张幻灯片显示三张图像，当单击向右箭头时，应显示3张新图像，而当单击左箭头时，则应返回之前的3张图像。

我无法完成这项工作，所以这是我的代码：

滑块组件（父级）

class Slider extends Component {
   state = {
     left: 0
   }

    moveToRight = () =>{
        this.setState(prevState => ({
            left: prevState.left + 500
        }))

        console.log(this.state.left)
    }

    moveToLeft = () => {
        this.setState(prevState => ({
            left: prevState.left - 500
        }))
    }
    render() {

        return (
            <div className="slider container">
                <div className="slider__arrow slider__arrow--left" onClick={this.moveToLeft}>
                    <i class="fa fa-angle-left fa-2x" aria-hidden="true"></i>
                </div>

                <Slider_content categories={this.state.categories} style={{marginLeft: `${this.state.left}px`}}/>

                <div className="slider__arrow slider__arrow--right" onClick={this.moveToRight}>
                    <i class="fa fa-angle-right fa-2x" aria-hidden="true"></i>
                </div>
            </div>
        );

    }
}

export default Slider;

Slider_content组件：

import React, {Component} from 'react';

class Slider_content extends Component {

    render () {
        const { categories, left } = this.props;

        return (
            <div className="slider__content ">
                <div className="slider__wrapper container--vertical">

                    {categories.map((category, i) => (
                        <div className="slider__item container" key={i} style={{backgroundColor: category.categoryColor}}>
                            <div className="slider__item-details">
                                <span>{category.name}</span>
                                <a href="#" class="btn slider__btn  btn--white">View Products</a>
                            </div>
                            <div className="slider__item-img">
                                <img src={category.image} class="slider__img"/>
                            </div>

                        </div>

                    ))}  

                </div>
            </div>
        );
    }
}

export default Slider_content;

CSS：

.slider { 
  margin-top: 3em;
  height: 100%;
  position: relative;
}

.slider__content {
  height: 100%;
  width: 100%;
  position: relative;

}

.slider__wrapper {
  height: 100%;
  flex-wrap: wrap;
  overflow: hidden;
  justify-content: space-between
}

.slider__item {
  height: 100%;
  margin : 9px;
  position: relative;
  overflow: hidden;
}

我在这段代码中做错了什么，如何在单击向右箭头时将slider_content滑块向左滑动，并在向左箭头时向右滑动？

我不希望滑块每次点击滑动500px，它只是为了进行实验 我需要它准确地滑动才能在正确的位置显示下3张图像，我也不能做到这一点！