Every state change slider re-rendering and back to first slide. about react-owl-carousel

[iamtomhanks]

I've solved for just dragging the carousel by doing the following:

1. store the startPosition in state:
   this.state = { startPosition: '0' };

2. Pass startPosition to OwlCarousel as prop
   startPosition={this.state.startPosition}

3. Pass this as well as a prop:
   onDragged={(object) => this.updateCarouselPosition(object)}

4. Function:

updateCarouselPosition(object){ if(object.item.index != this.state.startPosition){ this.setState({ startPosition: object.item.index }); } }

[akon3000]

How to fix step by step -:

1. Pass ref={(el) => { this.slider = el; }} to OwlCarousel as prop

2. Inside function componentDidUpdate set
   componentDidUpdate() { this.slider.owlCarousel.trigger('refresh.owl.carousel'); }

3.Good luck.

[moxon6]

  const startPosition = useRef(0);
  return (
    <OwlCarousel
      startPosition={startPosition.current}
      onDragged={({ item, page }) => {
        startPosition.current = item.index - page.size;
      }}
    >
        ...
    </OwlCarousel>
    )

• This seems to work for the infinite loop slideshow.
• Using a ref instead of state since we don't actually want a rerender on the value update, but we do want to keep track of the value for the next render

Can no one solve this problem?

[iamtomhanks]

Having same issue.

[mxdi9i7]

Problem fixed with iamtomhanks's solution. You do need to manually keep count of the startPosition to avoid resetting the index everytime onChange is triggered on owlCarousel.

[truongnm97]

I've solved for just dragging the carousel by doing the following:

1. store the startPosition in state:
   this.state = { startPosition: '0' };
2. Pass startPosition to OwlCarousel as prop
   startPosition={this.state.startPosition}
3. Pass this as well as a prop:
   onDragged={(object) => this.updateCarouselPosition(object)}
4. Function:

updateCarouselPosition(object){ if(object.item.index != this.state.startPosition){ this.setState({ startPosition: object.item.index }); } }

nice, but your solution doesn't work with infinite loop slideshow

[Henry-Bot-Hive]

anyone know how to get this working for Angular?

[mariomurrent-softwaresolutions]

I've solved for just dragging the carousel by doing the following:

1. store the startPosition in state:
   this.state = { startPosition: '0' };
2. Pass startPosition to OwlCarousel as prop
   startPosition={this.state.startPosition}
3. Pass this as well as a prop:
   onDragged={(object) => this.updateCarouselPosition(object)}
4. Function:

updateCarouselPosition(object){ if(object.item.index != this.state.startPosition){ this.setState({ startPosition: object.item.index }); } }

But this causes some flickering