请帮我在 react.js 中创建一个图像滑块？

如何解决请帮我在 react.js 中创建一个图像滑块？

var workArrays = [{id: 1,img: "https://scontent-lax3-2.xx.fbcdn.net/v/t1.0-9/117405206_1535037326696077_4967665142447981078_o.png?_nc_cat=111&ccb=2&_nc_sid=730e14&_nc_ohc=XlNXGJF47E0AX8lB1fk&_nc_ht=scontent-lax3-2.xx&oh=d44bd3d97c906f56746b360fc7514c64&oe=5FF77A89"},{id: 2,{id: 3,{id: 4,{id: 5,img: "https://scontent-lax3-2.xx.fbcdn.net/v/t1.0-9/117405206_1535037326696077_4967665142447981078_o.png?_nc_cat=111&ccb=2&_nc_sid=730e14&_nc_ohc=XlNXGJF47E0AX8lB1fk&_nc_ht=scontent-lax3-2.xx&oh=d44bd3d97c906f56746b360fc7514c64&oe=5FF77A89"}]

     var slides = workArrays.length;
    class Page1 extends React.Component{
        constructor(props){
            super(props);
            this.state = {
             // SOS: this is the initial state that I have set up.
               slides : (0) 
            };
            this.leftArrow = this.leftArrow.bind(this);
            this.rightArrow = this.rightArrow.bind(this);
        }
            leftArrow(){
                this.setState({
                    // SOS: they are not doing anything when clicked
                    slides: this.state.slides - 1 
                })
            }
            rightArrow(){
                this.setState({
                    // SOS: this want also not doing anything
                    slides: this.state.slides + 1 T
               })

            }
        render(){
        return(
                <div>
                    <Header/>
                    <Hero/>
                    <div>
                        // SOS: Also my left arrown and right arrow are not showing up
                        <button onClick={this.leftArrow}><i className="far fa-arrow-circle-left"></i></button>
                        <button onClick={this.rightArrow}><i className="far fa-arrow-circle-right"></i></button>
                        {this.props.workArrays.map(function(work){
                            return <div key={work.id}>
                                <Services img={work.img}/>
                    </div>
            })}</div>
               </div>
        );
        }
    }

解决方法

您没有正确的变量绑定： 在类构造函数之前定义变量

 var slides = workArrays.length;

leftSlide 和 rightSlide 函数中有一个错误（你使用 state，你有一个零）

this.setState({
 slides: this.state.slides - 1 
});

这就是为什么在 this.state.slides 中点击左键为 -1 的原因。

尝试使用左键单击：

// calculate previous slide
var newCurrentSlide = this.state.slides - 1;
// if slide number < 0,then get last slide from array
if (newCurrentSlide < 0){
  newCurrentSlide = slides.length - 1;
}

this.setState({
 slides: newCurrentSlide
});

右键单击：

// calculate next slide
var newCurrentSlide = this.state.slides + 1;
// if slide number >= count slides,then get first slide from array
if (newCurrentSlide >= slides){
  newCurrentSlide = 0;
}

this.setState({
 slides: newCurrentSlide
});

我建议您将可变幻灯片重命名为 slidesCount - 这是一个更好的命名约定。

如果您想在左右点击时使用动态滑块，那么您可以像这样显示单个活动图像：

render(){
  return(
    <div>
      <Header/>
      <Hero/>
      <div>
        <button onClick={this.leftArrow}><i className="far fa-arrow-circle-left"></i></button>
        <button onClick={this.rightArrow}><i className="far fa-arrow-circle-right"></i></button>
        <div key={this.props.workArrays[this.state.slides].id}>
          <Services img={this.props.workArrays[this.state.slides].img}/>
        </div>
      </div>
    </div>
  );
}