How to Use Bootstrap Carousel in ReactJS

Introduction

 

In this article, I will explain how to create a Bootstrap Carousel in ReactJS. Carousel is a slideshow for cycling a series of images or videos. A carousel rotates the images horizontally or vertically with some effect.

 

Prerequisites

• Basic knowledge of React.js
• Visual Studio Code
• Node and NPM installed
• Bootstrap

Create ReactJS project

 

Let's first create a React application using the following command.

npx create-react-app firsttutorial

Open the newly created project in Visual Studio code and Install bootstrap in this project using the following command. 

npm install react-bootstrap bootstrap

Now, open the index.js file and import Bootstrap.

import 'bootstrap/dist/css/bootstrap.min.css';

Now, right-click on the public folder. Add a new folder 'assets' and under it add a new folder and rename that to 'img' and add some demo images to this folder

 

 

Now go to src folder and create a new component 'BootstrapCarousel .js' and add the following reference in this component  

import Carousel from 'react-bootstrap/Carousel'

Add the following code in this component:

import React, { Component } from 'react'
import Carousel from 'react-bootstrap/Carousel'
export class BootstrapCarousel extends Component {
        render() {

                return (
                        <div>
                         <div class='container-fluid' >
                          <div className="row title" style={{ marginBottom: "20px" }} >
                          <div class="col-sm-12 btn btn-warning">
                          How To Use Bootstrap Carousel In ReactJS
                         </div>
                         </div>
                         </div>
                         <div className='container-fluid' >
                         <Carousel>
                         <Carousel.Item style={{'height':"300px"}} >
                         <img style={{'height':"300px"}}
                         className="d-block w-100"
                        src={'assets/img/img2.jpg'}  />
                           <Carousel.Caption>
                             <h3>First Demo </h3>
                                 </Carousel.Caption>
                                 </Carousel.Item  >
                                 <Carousel.Item style={{'height':"300px"}}>
                                 <img style={{'height':"300px"}}
                                   className="d-block w-100"
                                    src={'assets/img/img1.jpg'}    />
                                       <Carousel.Caption>
                                   <h3>Second Demo</h3>
                                      </Carousel.Caption>
                                         </Carousel.Item>
                                       <Carousel.Item style={{'height':"300px"}}>
                                       <img style={{'height':"300px"}}
                                        className="d-block w-100"
                                         src={'assets/img/img3.jpg'}   />
                                        <Carousel.Caption>
                                          <h3>Third Demo</h3>
                                          </Carousel.Caption>
                                         </Carousel.Item>
                                        </Carousel>
                                </div>
                        </div>
                )
        }
}

export default BootstrapCarousel

 Now open app.js file and add the following code:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import BootstrapCarousel from './BootstrapCarousel'
function App() {
  return (
    <div className="App">
      <BootstrapCarousel></BootstrapCarousel>
    </div>
  );
}

export default App;

Now run the project by using 'npm start' and check the result:

 

 

We can also pause slider on mouse hover and set time intervals. Let's create a component 'BootstrapCarouselDemo.js' and add the following reference in this component. 

import React, { Component } from 'react'

export class BootstrapCarouselDemo extends Component {
        render() {
                return (
                        <div>
                         <div class='container-fluid' >
                          <div className="row title" style={{ marginBottom: "20px" }} >
                          <div class="col-sm-12 btn btn-warning">
                          How To Use Bootstrap Carousel In ReactJS
                         </div>
                         </div>
                         </div>
                         <div className='container-fluid' >
                         <Carousel interval={600} keyboard={false} pauseOnHover={true}>
                         <Carousel.Item style={{'height':"300px"}}  >
                         <img style={{'height':"300px"}}
                         className="d-block w-100"
                        src={'assets/img/img2.jpg'}  />
                           <Carousel.Caption>
                             <h3>First Demo </h3>
                                 </Carousel.Caption>
                                 </Carousel.Item  >
                                 <Carousel.Item style={{'height':"300px"}}>
                                 <img style={{'height':"300px"}}
                                   className="d-block w-100"
                                    src={'assets/img/img1.jpg'}    />
                                       <Carousel.Caption>
                                   <h3>Second Demo</h3>
                                      </Carousel.Caption>
                                         </Carousel.Item>
                                       <Carousel.Item style={{'height':"300px"}}>
                                       <img style={{'height':"300px"}}
                                        className="d-block w-100"
                                         src={'assets/img/img3.jpg'}   />
                                        <Carousel.Caption>
                                          <h3>Third Demo</h3>
                                          </Carousel.Caption>
                                         </Carousel.Item>
                                        </Carousel>
                                </div>
                        </div>
                )
        }
}

export default BootstrapCarouselDemo

 Now open app.js file and add the following code:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import BootstrapCarouselDemo from './BootstrapCarouselDemo'
function App() {
  return (
    <div className="App">
      <BootstrapCarouselDemo></BootstrapCarouselDemo>
    </div>
  );
}

export default App;

Now run the project using 'npm start' and check your results.

 

Summary

 

In this article, we learned how to implement Bootstrap Carousel in a ReactJS application.