Блог

Я пытаюсь создать несколько изображений на слайдер слайда, которые показывают по три изображения на слайд, при нажатии стрелки вправо должно отображаться 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 сдвигаться влево при нажатии стрелки вправо и вправо при нажатии стрелки влево??

Я не хочу, чтобы слайдер перемещался на 500 пикселей за клик, это просто для экспериментов, мне нужно, чтобы он точно скользил, чтобы показать следующие 3 изображения в правильном положении, я тоже не мог этого сделать!!