Swiper error

[DaneHarrison]

If your swipe too widely on any one of the swipers at any stage the libraries onChange event handling does not work as expected. This can be fixed using regular JSX event handling:

i.e

<Swiper
 slidesPerView={this.state.numCards}
 className="swiper fullscreen"
 onTouchStart={this.handleTouchStart}
 onTouchEnd={this.handleTouchEnd}
 onSlideChange={(swiper) => { this.updateTabs(swiper) }}
 onSwiper={(swiper) => { this.setup(swiper) }}
>

and

handleTouchStart = (e) => {
  this.touchStartX = e.touches[0].clientX;
};

handleTouchEnd = (e) => {
  const touchEndX = e.changedTouches[0].clientX;
  const deltaX = touchEndX - this.touchStartX;

  if (deltaX > 0) {
    this.handleSwipeRight();
  } else if (deltaX < 0) {
    this.handleSwipeLeft();
  }
};

handleSwipeRight = () => {
  const prevNumCards = this.state.numCards;
  this.setState({ numCards: prevNumCards + 1 });
};

handleSwipeLeft = () => {
  const prevNumCards = this.state.numCards;
  this.setState({ numCards: prevNumCards - 1 });
};