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>

<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 ( <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> ); }

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

    return (
        <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>
    );
}

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>

<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