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

我试图创建一个多图像每张幻灯片滑块，每个幻灯片显示三个图像，当单击右箭头时，应显示三个新图像，当左箭头单击时，前三个图像返回显示

我无法使其正常工作，因此这是我的代码：

滑块组件（父级）

在这段代码中我做错了什么，我如何使滑块内容滑块在单击右箭头时向左滑动，在单击左箭头时向右滑动

我不希望滑块每次点击滑动500像素，这只是为了实验 我需要它精确地滑动，以便在正确的位置显示接下来的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;

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;

.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;
}