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

Question

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, 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: 3, 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: 4, 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: 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>
        );
        }
    }

Answer 1

You do not have the right variable bindings: Before the class constructor you define variable

 var slides = workArrays.length;

There is a bug in the functions leftSlide and rightSlide (you use state, where you have a zero)

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

That's the reason why in this.state.slides you have -1 on click left.

Try to use on left click:

// 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
});

for right click:

// 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
});

I suggest you rename variable slides to slidesCount - it is a better naming convention.

And if you want a dynamic slider on left and right clicks then you can show a single active image like this:

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