React-Bootstrap Carousel Controlled

React-Bootstrap Carousel Controlled is a feature that allows you to style engaging images or content sliders for your web pages. React-Bootstrap’s Carousel component provides control, enabling you to take the reins over the carousel’s content, navigation, and behavior.

React-Bootstrap Carousel Controlled Props:

• activeIndex: It identifies the currently shown slide in a Carousel based on its index.
• onSelect: onSelect is a function which called when the user changes the active slide.

<Carousel activeIndex={index} onSelect={handleSelect}>

Example: Here, below is the basic implementation of the Carousel Controlled.

Javascript

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Carousel from 'react-bootstrap/Carousel';

export default function App() {
    const [index, setIndex] = useState(0);

    const handleSelect = (selectedIndex) => {
        setIndex(selectedIndex);
    };
    return (
        <div style={{
            display: 'block',
            width: 700, padding: 30
        }}>
            <h2 style={{ color: 'green' }}>
                GeeksforGeeks
            </h2>
            <h2>React-Bootstrap Carousel Controlled</h2>
            <Carousel activeIndex={index}
                onSelect={handleSelect}>
                <Carousel.Item interval={1500}>
                    <img className="d-block w-100" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png"
                        alt="JAVA" />

                </Carousel.Item>
                <Carousel.Item interval={500}>
                    <img className="d-block w-100" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png"
                        alt="HTML" />

                </Carousel.Item>
                <Carousel.Item interval={500}>
                    <img className="d-block w-100" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png"
                        alt="Angular" />
                </Carousel.Item>
            </Carousel>
        </div>
    );
}

Output: Now open your browser and go to http://localhost:3000/, you will see the following output

Example 2: In this example, we will see how to add Carousel.Caption to the Carousel Controlled

Javascript

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Carousel from 'react-bootstrap/Carousel';

export default function App() {
    const [index, setIndex] = useState(0);

    const handleSelect = (selectedIndex) => {
        setIndex(selectedIndex);
    };
    return (
        <div style={{
            display: 'block',
            width: 700, padding: 30
        }}>
            <h2 style={{ color: 'green' }}>
                GeeksforGeeks
            </h2>
            <h2>React-Bootstrap Carousel Controlled</h2>
            <Carousel activeIndex={index}
                onSelect={handleSelect}>
                <Carousel.Item interval={1500}>
                    <img className="d-block w-100" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210425122739/2-300x115.png"
                        alt="Image One" />
                    <Carousel.Caption>
                        <h3>Label for first slide</h3>
                        <p>Sample Text for Image One</p>
                    </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item interval={500}>
                    <img className="d-block w-100" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210425122716/1-300x115.png"
                        alt="Image Two" />
                    <Carousel.Caption>
                        <h3>Label for second slide</h3>
                        <p>Sample Text for Image Two</p>
                    </Carousel.Caption>
                </Carousel.Item>
            </Carousel>
        </div>
    );
}

Output: Now open your browser and go to http://localhost:3000/, you will see the following output

Reference: https://react-bootstrap.github.io/docs/components/carousel#controlled