Open In App

ReactJS Reactstrap Carousel Component

Improve
Improve
Like Article
Like
Save
Share
Report

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: 
            altText: 'Slide One'
        },
        {
            caption: 'Sample Caption Two',src: 
            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: 
        },
        {src: 
        }
    ];
  
    // 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;


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:

Reference:  https://reactstrap.github.io/components/carousel/



Last Updated : 22 Jul, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads