Adding and removing className dynamically in an inifinite loop - reactjs

Question

I built a carousel that displays 3 slides. While the center one is 100% width displayed, the left and right ones are only visible 10% of the width.
After accessing the website, the carousel starts moving automatically using this:
componentDidMount() {
this.carouselTimer = setInterval(() => {
this.handleButtonNext();
}, 5000);
}
And if I manually change the slide, I reset the interval that changes the slides automatically using clearInterval and setInterval again.
In order to be able to add a sliding animation, I want to change the state properties (leftSlide & rightSlide) from false to true and after the animation back to false.
I tried to change the properties from false to true inside handleButtonNext() method making changes here:
<Slide
className={` ${this.state.leftSlide ? ' left-slide' : ''} ${this.state.rightSlide ? 'right-slide' : ''}`}
...the rest of slides.../>
The dilemma I have and the problem I encountered so far is that I cannot remove the added class in such a manner that it won't break the autoplay feature.
I tried using a reset method and restarting the autoplay, but no solution seems to be working.
Without the removal of the added class, the autoplay (and reset in case of a manual change of the slides) works just fine, but that's not enough.
This is the method that handles next button:
handleButtonNext() {
this.setState({
rightSlide: true
});
// this.wait1ms = setInterval(() => {
// }, 1100); (useless attempt)
this.setState({
activeSlide: this.nextSlide()
})
}
nextSlide() {
let nextIndex = this.state.activeSlide+1;
return (nextIndex>this.state.slides.length-1) ? 0 : nextIndex ;
}
*The method is used here:*
<a className="button-container right">
<div className="carousel-button next" onClick={this.handleButtonNext}></div>
</a>
#same for the left button
I need to mention that I do not master React and I am fairly new to it. Thank you for the time you will take to help me! I wish you a great day.
L.E: I forgot to mention that I would like to do this using class component, not the hooks that function provides.

Answer 1

The problem is that I cannot remove the added class in such a manner that it won't break the autoplay feature.
setNextSlideStates(){
this.setState({
// remove rightSlide state
rightSlide: false,
// update the active slide state
activeSlide: this.nextSlide()
});
}
// for usert button click handler, set withAnimation to false.
handleButtonNext(withAnimation) {
if(this.carouselTimer) clearTimeout(this.carouselTimer)
// if there are any animations, terminate them and call setNextSlideStates manually
if(this.animationTimer) {clearTimeout(this.animationTimer); this.setNextSlideStates(); }
// start the animation
this.setState({
rightSlide: true
});
// wait 1.1 sec for animation to end
this.animationTimer = setTimeout(() => {
this.setNextSlideStates()
this.animationTimer = null;
// autoplay the next slide
this.carouselTimer = setTimeout(() => {
this.handleButtonNext(true);
}, 3900);
}, withAnimation ? 1100 : 0)
}
Also change your componentDidMount to:
componentDidMount() {
this.carouselTimer = setTimeout(() => {
this.handleButtonNext(true);
}, 3900);
}
Button Handler:
{/* no animation */}
<button onClick={() => {this.handleButtonNext(false)}}>next</button>