Thursday, October 2, 2025
HomeLanguagesReact-Bootstrap Carousel Component

React-Bootstrap Carousel Component

React-Bootstrap is a front-end framework that was designed keeping react in mind. Carousel Component provides a way to create a slideshow for our images or text slides with a present full manner in a cyclic way. We can use the following approach in ReactJS to use the react-bootstrap Carousel Component.

Carousel Props:

  • activeIndex: It is used to control the current active visible slide.
  • as: It can be used as a custom element type for this component.
  • controls: These are used to show the next/previous button in the carousel.
  • defaultActiveIndex: It is the default active index which is 0.
  • fade: It is used to add a fade animation between slides while movement.
  • indicators: It is used to show a set of slide position indicators.
  • interval: It is used to delay time between automatically cycling movement.
  • keyboard: It is used to indicate whether the carousel should react to the keyboard event or not.
  • nextIcon: It is used to override the default next icon.
  • nextLabel: It can be used to show the next element in the carousel, and it is a type of label that is only shown to screen readers.
  • onSelect: It is a callback that is triggered when the active item changes.
  • onSlid: It is a callback that is triggered when a slide transition ends.
  • onSlide: It is a callback that is triggered when a slide transition starts.
  • pause: It is used to pause the slide based on different mouse events.
  • prevIcon: It is used to override the default previous icon.
  • prevLabel: It can be used to show the previous element in the carousel, and it is a type of label that is only shown to screen readers.
  • ref: It is used to provide the ref attribute for this element.
  • slide: It is used to enable the animation between slides.
  • touch: It is used on touchscreen devices to indicate whether it should support left/right swipe interactions.
  • wrap: It indicates whether the carousel should have a hard stop or cycle continuously.
  • bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.

Carousel.Item Props:

  • as: It can be used as a custom element type for this component.
  • interval: It is used to delay time between automatically cycling movement for these items.
  • bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.

Carousel.Caption Props:

  • as: It can be used as a custom element type for this component.
  • bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.

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 react-bootstrap 
    npm install bootstrap

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js




import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Carousel from 'react-bootstrap/Carousel';
  
export default function App() {
  return (
    <div style={{ display: 'block', width: 700, padding: 30 }}>
      <h4>React-Bootstrap Carousel Component</h4>
      <Carousel>
        <Carousel.Item interval={1500}>
          <img
            className="d-block w-100"
            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"
            alt="Image Two"
          />
          <Carousel.Caption>
            <h3>Label for second slide</h3>
            <p>Sample Text for Image Two</p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    </div>
  );
}


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://react-bootstrap.github.io/components/carousel/

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
RELATED ARTICLES

Most Popular

Dominic
32331 POSTS0 COMMENTS
Milvus
85 POSTS0 COMMENTS
Nango Kala
6703 POSTS0 COMMENTS
Nicole Veronica
11867 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11927 POSTS0 COMMENTS
Shaida Kate Naidoo
6818 POSTS0 COMMENTS
Ted Musemwa
7080 POSTS0 COMMENTS
Thapelo Manthata
6775 POSTS0 COMMENTS
Umr Jansen
6776 POSTS0 COMMENTS