diff --git a/src/components/Reviews.js b/src/components/Reviews.js index b531045a..4aa0d2a2 100644 --- a/src/components/Reviews.js +++ b/src/components/Reviews.js @@ -37,15 +37,15 @@ export default class Reviews extends Component { super(props); this.state = { + active: 0, mobile: true, sliding: false }; - this.active = 0; this.slideshow = null; this.imageHovered = false; this.length = 0; - this.delay = 5000; + this.delay = 30000; this.clientWidth = 0; } @@ -64,23 +64,34 @@ export default class Reviews extends Component { switch (!this.state.mobile && isVisible) { case true: { if (!this.slideshow) { - this.slideshow = setInterval(this.changeSlide, this.delay); + this.startSlideshow(); } break; } case false: { if (this.slideshow) { - clearInterval(this.slideshow); - this.slideshow = null; + this.stopSlideshow(); } break; } } }; + startSlideshow = () => { + this.slideshow = setInterval(this.changeSlide, this.delay); + }; + + stopSlideshow = () => { + clearInterval(this.slideshow); + this.slideshow = null; + }; + clickHandler = (activeId) => { - this.active = activeId; this.panel.to(activeId); + this.setState({ active: activeId }); + + this.stopSlideshow(); + this.startSlideshow(); }; changeSlide = () => { @@ -88,7 +99,7 @@ export default class Reviews extends Component { return; } - let newActive = this.active; + let newActive = this.state.active; if (newActive === this.length - 1) { newActive = 0; } else { @@ -98,8 +109,7 @@ export default class Reviews extends Component { this.setState({ sliding: true }); setTimeout(() => { this.panel.to(newActive); - this.active = newActive; - this.setState({ sliding: false }); + this.setState({ active: newActive, sliding: false }); }, 500); }; @@ -201,13 +211,19 @@ export default class Reviews extends Component {