Carousel / Slider

Carousel.js

class Slider extends React.Component {
	state = {
		index: 0
	};

	

	invokeInterval = () => {
		this.setState({
			index:
				this.state.index === this.props.children.length - 1
					? 0
					: this.state.index + 1
		});
	};

	componentDidMount() {
		this.interval = setInterval(this.invokeInterval, 5000);
	}

	componentWillUnmount() {
		clearInterval(this.interval);
	}

	handlePreviousQuote = () => {
		this.setState({ index: this.state.index - 1 });
	};

	handleNextQuote = () => {
		const interval = this.interval;
		clearInterval(interval);
		setTimeout(
			() => (this.interval = setInterval(this.invokeInterval, 5000)),
			5000
		);
		this.setState({ index: this.state.index + 1 });
	};

	render() {
		return (
			<Grid container justify="center" wrap="nowrap">
				<Grid item xs={2}>
					{this.state.index > 0 && (
						<ChevronLeft
							onClick={this.handlePreviousQuote}
							style={{ cursor: 'pointer', fontSize: 40 }}
						/>
					)}
				</Grid>
				<Grid item>
					{
						React.Children.map(this.props.children, child =>
							React.cloneElement(child, {
								index: this.state.index,
								total: React.Children.count(this.props.children)
							})
						)[this.state.index]
					}
				</Grid>
				<Grid item xs={2}>
					{this.state.index < this.props.children.length - 1 && (
						<ChevronRight
							onClick={this.handleNextQuote}
							style={{ cursor: 'pointer', fontSize: 40 }}
						/>
					)}
				</Grid>
			</Grid>
		);
	}
}

const SliderAuthor = props => (
	<>
		<br /> - {props.children}
	</>
);

const SliderItemText = props => <div>"{props.children}"</div>;

const SliderItem = props => {
	return (
		<div style={{ opacity: props.index !== props.total ? 1 : 0 }}>
			{props.children}
		</div>
	);
};