selectedItem retains control when an `onChange()` sets it manually

<Carousel autoPlay={true} 
            interval={10000}
             showThumbs={false}
              infiniteLoop={true}
              showStatus={false}
              onChange={()=>this.setState({changed:!this.state.changed})}
              dynamicHeight={true}
             >

[qruzz]

I was having the same issue, but there is actually a fairly simple workaround … According to the docs, the Carousel component has a selectedItem prop, that takes an Number for the index of the item selected in the image sequence.

That means, that if you initialise your components state with the the item to select, and in the onChange prop set the state to the next selected item, it will still perform the transition.

See code example for clarification:

constructor(props) {
	super(props);

	this.state = {
		selectedItem: 0,
	};
}

renderHeroContainer = () => {
	return (
		<div className="carousel-container">
			<Carousel
				autoPlay
				className="carousel"
				infiniteLoop={true}
				selectedItem={this.state.selectedItem}
				transitionTime={400}
				onChange={(e) => {
					this.setState({
						selectedItem: e,
					});
				}}>
				{this.renderItems()}
			</Carousel>
		</div>
	);
}

[dschinkel]

@leandrowd this is annoying you should show examples and provide basic changing of selected item handler code. People at least just want some default basic stuff to work out of the box like clicking the arrow to the next item.