Skip to main content

Carousel

See React Bootstrap/Carousel for full documentation and props.

By default, the Carousel component will render a Pagination component at the bottom that allows the user to navigate between slides. The number of pages is determined by the number of Carousel.Item components that are passed as children to the Carousel component.

Result
Loading...
Live Editor
<Carousel>
	<Carousel.Item>
		<BaseChart
			options={{
				title: {
					text: 'Fruits',
				},
				xAxis: {
					categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums'],
				},
				series: [
					{
						type: 'column',
						name: 'Jane',
						data: [3, 2, 1, 3, 4],
					},
					{
						type: 'column',
						name: 'John',
						data: [2, 3, 5, 7, 6],
					},
					{
						type: 'column',
						name: 'Joe',
						data: [4, 3, 3, 9, 0],
					},
					{
						type: 'spline',
						name: 'Average',
						data: [3, 2.67, 3, 6.33, 3.33],
						marker: {
							lineWidth: 2,
						},
					},
				],
			}}
		/>
	</Carousel.Item>
	<Carousel.Item>
		<BaseChart
			options={{
				title: {
					text: 'Cheeses',
				},
				xAxis: {
					categories: ['Cheddar', 'Mozzarella', 'Swiss', 'Gouda'],
				},
				series: [
					{
						type: 'column',
						name: 'Jane',
						data: [10, 3, 2, 5],
					},
					{
						type: 'column',
						name: 'John',
						data: [2, 2, 3, 2],
					},
					{
						type: 'column',
						name: 'Joe',
						data: [3, 4, 4, 2],
					},
					{
						type: 'spline',
						name: 'Average',
						data: [5, 1, 3, 4],
					},
				],
			}}
		/>
	</Carousel.Item>
</Carousel>

Controlled​

Result
Loading...
Live Editor
function Example() {
	const [activeIndex, setActiveIndex] = React.useState(0);

	return (
		<div data-testid="pw-carousel-controlled">
			<Carousel activeIndex={activeIndex} onSelect={setActiveIndex}>
				<Carousel.Item>
					<div
						style={{ height: 270 }}
						className="d-flex justify-content-center align-items-center"
					>
						<h1>Slide 1</h1>
					</div>
				</Carousel.Item>
				<Carousel.Item>
					<div
						style={{ height: 270 }}
						className="d-flex justify-content-center align-items-center"
					>
						<h1>Slide 2</h1>
					</div>
				</Carousel.Item>
				<Carousel.Item>
					<div
						style={{ height: 270 }}
						className="d-flex justify-content-center align-items-center"
					>
						<h1>Slide 3</h1>
					</div>
				</Carousel.Item>
			</Carousel>
		</div>
	);
}

Without Pagination​

Result
Loading...
Live Editor
<Carousel showPagination={false} indicators controls>
	<Carousel.Item>
		<div
			style={{ height: 270 }}
			className="d-flex justify-content-center align-items-center bg-blue-800"
		>
			<h1 className="text-white">Slide 1</h1>
		</div>
	</Carousel.Item>
	<Carousel.Item>
		<div
			style={{ height: 270 }}
			className="d-flex justify-content-center align-items-center bg-blue-800"
		>
			<h1 className="text-white">Slide 2</h1>
		</div>
	</Carousel.Item>
	<Carousel.Item>
		<div
			style={{ height: 270 }}
			className="d-flex justify-content-center align-items-center bg-blue-800"
		>
			<h1 className="text-white">Slide 3</h1>
		</div>
	</Carousel.Item>
</Carousel>

Props​