Carousel will not advance properly when using external buttons

[giantrobotbee]

Hi there, I've basically followed the examples verbatim and am experiencing a problem.

The tl;dr is that I have custom buttons wired up, I click them, the slide advances one, and then immediately snaps back to the first slide.

Here is my code:

class MyScroller extends React.Component {
	state = {
		currentIndex: 0,
	}

	onSlideChanged = (e) => {
		this.setState({ currentIndex: e.item });
	}

	render () {
		const classes = cn({
			'in-progress': this.state.currentIndex !== 8
		});

		return (
			<div className={classes}>
				<button onClick={() => this.carousel._slidePrev()}>Prev button</button>
				<button onClick={() => this.carousel._slideNext()}>Next button</button>
				<AliceCarousel
					mouseDragEnabled={true}
					dotsDisabled={true}
					buttonsDisabled={true}
					infinite={false}
					onSlideChanged={this.onSlideChanged}
					ref={(el) => { this.carousel = el; }}
					responsive={{
						0: {
							items: 2
						},
						600: {
							items: 3
						},
						900: {
							items: 4
						},
						1200: {
							items: 5
						}
					}}
				>
					<MyThing />
					<MyThing />
					<MyThing />
					<MyThing />
					<MyThing />
					<MyThing />
					<MyThing />
					<MyThing />
					<MyThing />
				</AliceCarousel>
			</div>
		);
	}
}

[giantrobotbee]

I can't completely confirm this, but it may be a race condition due to PureComponent whereby my component forces a re-render of the carousel (due to the setState call in my onSlideChanged callback) before AliceCarousel is done updating it's internal state.

[maxmarinich]

Hi @drmanitoba, you forgot to specify slideToIndex property like this:

<AliceCarousel
        slideToIndex={this.state.currentIndex}
        // ...other props
>
    <MyThing />
    // ...
</AliceCarousel>

[giantrobotbee]

Hi, sorry, need to reopen this issue as this does not fix my problem.

The docs don't say I need this prop when scrolling via the internal methods as seen in my example, only when I opt to juggle the state externally in a wrapper.

I added in this prop as suggested, but the problem persists without any change in behaviour.

[maxmarinich]

@drmanitoba, please update version

[giantrobotbee]

Oh wow, thank you so much for the prompt response. Works perfectly now!