How to fix this multiple images per slide slider?? (React) - css

Question

I am trying to create a multiple images per slide slider that show three images per slid, when click the right arrow a 3 new images should be shown, and when the left one clicked the previous 3 images returns back to be shown.
I can not manage to make that work so this is my code:
Slider Component (parent)
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 Component:
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>
View Products
</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;
}
What i am doing wrong in this code, how can i manage to make the slider_content slider slides to left when click the right arrow and to right when click the left arrow??
I don't want the slider slides by 500px per click, it is just for experimenting
i need it to slide accurately to show the next 3 images in right position, i could not do that too!!