ReactJS Reactstrap Carousel Component

22 Jul, 2021
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 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 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
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;
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/
Reactstrap
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.