Open sahid-webhawksit opened 6 years ago
Can no one solve this problem?
Having same issue.
I've solved for just dragging the carousel by doing the following:
store the startPosition in state:
this.state = { startPosition: '0' };
Pass startPosition to OwlCarousel as prop
startPosition={this.state.startPosition}
Pass this as well as a prop:
onDragged={(object) => this.updateCarouselPosition(object)}
Function:
updateCarouselPosition(object){ if(object.item.index != this.state.startPosition){ this.setState({ startPosition: object.item.index }); } }
How to fix step by step -:
Pass ref={(el) => { this.slider = el; }}
to OwlCarousel as prop
Inside function componentDidUpdate set
componentDidUpdate() { this.slider.owlCarousel.trigger('refresh.owl.carousel'); }
3.Good luck.
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.
I've solved for just dragging the carousel by doing the following:
- store the startPosition in state:
this.state = { startPosition: '0' };
- Pass startPosition to OwlCarousel as prop
startPosition={this.state.startPosition}
- Pass this as well as a prop:
onDragged={(object) => this.updateCarouselPosition(object)}
- 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
const startPosition = useRef(0);
return (
<OwlCarousel
startPosition={startPosition.current}
onDragged={({ item, page }) => {
startPosition.current = item.index - page.size;
}}
>
...
</OwlCarousel>
)
anyone know how to get this working for Angular?
I've solved for just dragging the carousel by doing the following:
- store the startPosition in state:
this.state = { startPosition: '0' };
- Pass startPosition to OwlCarousel as prop
startPosition={this.state.startPosition}
- Pass this as well as a prop:
onDragged={(object) => this.updateCarouselPosition(object)}
- Function:
updateCarouselPosition(object){ if(object.item.index != this.state.startPosition){ this.setState({ startPosition: object.item.index }); } }
But this causes some flickering
@iamtomhanks solutions works for me.
When I want to change the state in my component its re-render the slider again and again. How can I fixed this issue ?