Простая карусель на React js

Сниппет для создания компонента супер простой карусели на React js. Автоматическое прокручивание слайдов по таймеру, без возможности управления вперед \ назад. Но при желании этот компонент возможно легко расширить под ваши нужды. Главное не забудьте вынести стили в отдельное место из файла js.

	.carousel {
	position: relative;
	}
	.carousel-item {
	position: absolute;
	visibility: hidden;
	background: #fec901;
	width: 400px;
	height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	text-transform: uppercase;
	font-weight: bold;
	user-select: none;
	}
	.carousel-item.visible {
	visibility: visible;
	}
	const Carousel = ({ carouselItems, ...rest }) => {
	const [active, setActive] = React.useState(0);
	let scrollInterval = null;
	React.useEffect(() => {
	scrollInterval = setTimeout(() => {
	setActive((active + 1) % carouselItems.length);
	}, 2000);
	return () => clearTimeout(scrollInterval);
	});
	return (
	<div className="carousel">
	{carouselItems.map((item, index) => {
	const activeClass = active === index ? ' visible' : '';
	return React.cloneElement(item, {
	...rest,
	className: `carousel-item${activeClass}`
	});
	})}
	</div>
	);
	};
	ReactDOM.render(
	<Carousel
	carouselItems={[
	<div>slide 1</div>,
	<div>slide 2</div>,
	<div>slide 3</div>
	]}
	/>,
	document.getElementById('root')
	);

view raw simple-carousel-react-js.js hosted with by GitHub