score:0

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

Related Query

More Query from same tag