ReactJS Reactstrap Carousel Component

Last Updated : 07 Aug, 2024

Reactstrap is a popular front-end library that is easy to use React Bootstrap 4 components. This library contains the stateless React components for Bootstrap 4. The Carousel component allows the user to show the sliding item, and it is used when there is a group of content on the same level. We can use the following approach in ReactJS to use the ReactJS Reactstrap Carousel Component.

Carousel Props:

activeIndex: It is used to control the current active visible slide.
next: It is a callback function that is triggered when the next button is clicked.
previous: It is a callback function that is triggered when the previous button is clicked.
keyboard: It is used to indicate whether the carousel should react to the keyboard event or not.
pause: It is used to pause the slide based on different mouse events.
ride: It is used to autoplay the carousel after the user manually cycles the first item.
interval: It is used to delay time between automatically cycling movement for these items.
children: It is used to pass the children element to this component.
mouseEnter: It is a callback function that is triggered when the mouse enters the Carousel.
mouseLeave: It is a callback function that is triggered when the mouse exits the Carousel.
slide: It is used to enable the animation between slides.
cssModule: It is used to denote the CSS module for styling.
enableTouch: It is used to indicate whether the touch gestures on the Carousel works or not.

CarouselItem Props:

tag: It is used to denote the tag for this component.
in: It is used to denote whether to show an item or not.
cssModule: It is used to denote the CSS module for styling.
children: It is used to pass the children element to this component.
slide: It is used to enable the animation between slides.

CarouselControl Props:

direction: It is used to denote the direction like next or previous.
onClickHandler: It is a callback function that is triggered when it is clicked.
cssModule: It is used to denote the CSS module for styling.
directionText: It is used to denote the direction text.

CarouselIndicators Props:

items: It is used to denote the items array.
activeIndex: It is used to control the current active visible slide.
cssModule: It is used to denote the CSS module for styling.
onClickHandler: It is a callback function that is triggered when it is clicked.

CarouselCaption Props:

captionHeader: It is used to denote the caption header value.
captionText: It is used to denote the caption text value.
cssModule: It is used to denote the CSS module for styling.

UncontrolledCarousel Props:

items: It is used to denote the items array.
indicators: It is used to show a set of slide position indicators.
controls: It is used to indicate whether it has controls or not.
autoPlay: It is used to indicate whether it can be auto-played or not.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:
```
npx create-react-app foldername
```
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
```
cd foldername
```
Step 3: After creating the ReactJS application, Install the required module using the following command:
```
npm install reactstrap bootstrap
```

Project Structure: It will look like the following.

Project Structure

Example 1: Now write down the following code in the App.js file. Here, we have used the Carousel component with the carousel control buttons.

App.js

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import {
    CarouselControl,
    Carousel,
    CarouselItem,
    CarouselIndicators,
} from 'reactstrap';

function App() {

    // State for Active index
    const [activeIndex, setActiveIndex] = React.useState(0);

    // State for Animation
    const [animating, setAnimating] = React.useState(false);

    // Sample items for Carousel
    const items = [
        {
            caption: 'Sample Caption One',src: 
'https://media.geeksforgeeks.org/wp-content/uploads/20210425122739/2-300x115.png',
            altText: 'Slide One'
        },
        {
            caption: 'Sample Caption Two',src: 
'https://media.geeksforgeeks.org/wp-content/uploads/20210425122716/1-300x115.png',
            altText: 'Slide Two'
        }
    ];

    // Items array length
    const itemLength = items.length - 1

    // Previous button for Carousel
    const previousButton = () => {
        if (animating) return;
        const nextIndex = activeIndex === 0 ?
            itemLength : activeIndex - 1;
        setActiveIndex(nextIndex);
    }

    // Next button for Carousel
    const nextButton = () => {
        if (animating) return;
        const nextIndex = activeIndex === itemLength ?
            0 : activeIndex + 1;
        setActiveIndex(nextIndex);
    }

    // Carousel Item Data
    const carouselItemData = items.map((item) => {
        return (
            <CarouselItem
                key={item.src}
                onExited={() => setAnimating(false)}
                onExiting={() => setAnimating(true)}
            >
                <img src={item.src} alt={item.altText} />
            </CarouselItem>
        );
    });

    return (
        <div style={{
            display: 'block', width: 320, padding: 30
        }}>
            <h8>ReactJS Reactstrap Carousel Component</h8>
            <Carousel previous={previousButton} next={nextButton}
                activeIndex={activeIndex}>
                <CarouselIndicators items={items}
                    activeIndex={activeIndex}
                    onClickHandler={(newIndex) => {
                        if (animating) return;
                        setActiveIndex(newIndex);
                    }} />
                {carouselItemData}
                <CarouselControl directionText="Prev"
                    direction="prev" onClickHandler={previousButton} />
                <CarouselControl directionText="Next"
                    direction="next" onClickHandler={nextButton} />
            </Carousel>
        </div >
    );
}

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

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

Example 2: Now write down the following code in the App.js file. Here, we have used the Carousel component without the carousel control buttons.

App.js

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import {
    Carousel,
    CarouselItem,
    CarouselIndicators,
} from 'reactstrap';

function App() {

    // State for Active index
    const [activeIndex, setActiveIndex] = React.useState(0);

    // State for Animation
    const [animating, setAnimating] = React.useState(false);

    // Sample items for Carousel
    const items = [
        {src: 
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190603152813/ml_gaming.png',
        },
        {src: 
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190528184201/gateexam.png',
        }
    ];

    // Items array length
    const itemLength = items.length - 1

    // Previous button for Carousel
    const previousButton = () => {
        if (animating) return;
        const nextIndex = activeIndex === 0 ?
            itemLength : activeIndex - 1;
        setActiveIndex(nextIndex);
    }

    // Next button for Carousel
    const nextButton = () => {
        if (animating) return;
        const nextIndex = activeIndex === itemLength ?
            0 : activeIndex + 1;
        setActiveIndex(nextIndex);
    }

    // Carousel Item Data
    const carouselItemData = items.map((item) => {
        return (
            <CarouselItem
                key={item.src}
                onExited={() => setAnimating(false)}
                onExiting={() => setAnimating(true)}
            >
                <img src={item.src} alt={item.altText} />
            </CarouselItem>
        );
    });

    return (
        <div style={{
            display: 'block', padding: 30
        }}>
            <h1>ReactJS Reactstrap Carousel Component</h1>
            <Carousel previous={previousButton} next={nextButton} 
                activeIndex={activeIndex}>
                <CarouselIndicators items={items}
                    activeIndex={activeIndex}
                    onClickHandler={(newIndex) => {
                        if (animating) return;
                        setActiveIndex(newIndex);
                    }} />
                {carouselItemData}
            </Carousel>
        </div >
    );
}

export default App;