index insanity after swipe-left/right by touch

[Confetti7]

Description

index insanity after swipe-left/right by touch

callback get index is wrong

[Cyberlane]

Could you provide a code example replicating your problem?

[Confetti7]

<ReactSwipe ref={el => (this.reactSwipeEl = el)} className={styles.carousel} swipeOptions={{ continuous: true, auto: 3000, stopPropagation: true }} callback={(index, elem) => {}}>
    {this.props.images.map((item, index) => (
        <img
            className={'lazyImg-banner' + index}
            key={item.link}
            src={defaultImg}
            alt={item.image}
            onClick={() => {
                this.props.history.push(handleUrlStringify(item.link));
            }}
        />
    ))}
</ReactSwipe>;
<div role="button" onClick={() => {this.reactSwipeEl.prev()}}>prev</div>
<div role="button" onClick={() => {this.reactSwipeEl.next()}}>next</div>

Click a few more times, especially to the last, the index is not accurate @Cyberlane

[Cyberlane]

So I made a minor tweak to the demo, attempting to replicate the issue you have but what I tried seems to work just fine:

const images = [
  'foo',
  'bar',
  'moo',
  'cow',
];

const Page = () => {
  let reactSwipeEl;

  return (
    <div className="center">
      <h1>ReactSwipe.js</h1>
      <h2>Open this page from a mobile device (real or emulated).</h2>
      <h2>
        You can pass{' '}
        <a href="https://github.com/voronianski/swipe-js-iso#config-options">
          Swipe.js options
        </a>{' '}
        as query params.
      </h2>

      <ReactSwipe ref={el => (reactSwipeEl = el)} swipeOptions={{ continuous: true, auto: 3000, stopPropagation: true }} callback={(index, elem) => {}}>
        {images.map((item, index) => (
          <div key={index}>
            {item} => {index}
          </div>
        ))}
    </ReactSwipe>
    <div role="button" onClick={() => {reactSwipeEl.prev()}}>prev</div>
    <div role="button" onClick={() => {reactSwipeEl.next()}}>next</div>
    </div>
  );
};

The only immediate difference I see is that you are rendering the images based on passed in props, and you have bound the element instance.

Is there something else I am perhaps missing?
Does the code I shared above present the same problem to you?

[Cyberlane]

Closing issue due to inactivity. Happy to re-open it if somebody is able to contribute further towards it.