React  

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.
  1. npx create-react-app firsttutorial  
Open the newly created project in Visual Studio code and Install bootstrap in this project using the following command. 
  1. npm install react-bootstrap bootstrap  
Now, open the index.js file and import Bootstrap.
  1. 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  
  1. import Carousel from 'react-bootstrap/Carousel'  
Add the following code in this component:
  1. import React, { Component } from 'react'  
  2. import Carousel from 'react-bootstrap/Carousel'  
  3. export class BootstrapCarousel extends Component {  
  4.         render() {  
  5.   
  6.                 return (  
  7.                         <div>  
  8.                          <div class='container-fluid' >  
  9.                           <div className="row title" style={{ marginBottom: "20px" }} >  
  10.                           <div class="col-sm-12 btn btn-warning">  
  11.                           How To Use Bootstrap Carousel In ReactJS  
  12.                          </div>  
  13.                          </div>  
  14.                          </div>  
  15.                          <div className='container-fluid' >  
  16.                          <Carousel>  
  17.                          <Carousel.Item style={{'height':"300px"}} >  
  18.                          <img style={{'height':"300px"}}  
  19.                          className="d-block w-100"  
  20.                         src={'assets/img/img2.jpg'}  />  
  21.                            <Carousel.Caption>  
  22.                              <h3>First Demo </h3>  
  23.                                  </Carousel.Caption>  
  24.                                  </Carousel.Item  >  
  25.                                  <Carousel.Item style={{'height':"300px"}}>  
  26.                                  <img style={{'height':"300px"}}  
  27.                                    className="d-block w-100"  
  28.                                     src={'assets/img/img1.jpg'}    />  
  29.                                        <Carousel.Caption>  
  30.                                    <h3>Second Demo</h3>  
  31.                                       </Carousel.Caption>  
  32.                                          </Carousel.Item>  
  33.                                        <Carousel.Item style={{'height':"300px"}}>  
  34.                                        <img style={{'height':"300px"}}  
  35.                                         className="d-block w-100"  
  36.                                          src={'assets/img/img3.jpg'}   />  
  37.                                         <Carousel.Caption>  
  38.                                           <h3>Third Demo</h3>  
  39.                                           </Carousel.Caption>  
  40.                                          </Carousel.Item>  
  41.                                         </Carousel>  
  42.                                 </div>  
  43.                         </div>  
  44.                 )  
  45.         }  
  46. }  
  47.   
  48. export default BootstrapCarousel  
 Now open app.js file and add the following code:
  1. import React from 'react';  
  2. import logo from './logo.svg';  
  3. import './App.css';  
  4. import BootstrapCarousel from './BootstrapCarousel'  
  5. function App() {  
  6.   return (  
  7.     <div className="App">  
  8.       <BootstrapCarousel></BootstrapCarousel>  
  9.     </div>  
  10.   );  
  11. }  
  12.   
  13. 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. 
  1. import React, { Component } from 'react'  
  2.   
  3. export class BootstrapCarouselDemo extends Component {  
  4.         render() {  
  5.                 return (  
  6.                         <div>  
  7.                          <div class='container-fluid' >  
  8.                           <div className="row title" style={{ marginBottom: "20px" }} >  
  9.                           <div class="col-sm-12 btn btn-warning">  
  10.                           How To Use Bootstrap Carousel In ReactJS  
  11.                          </div>  
  12.                          </div>  
  13.                          </div>  
  14.                          <div className='container-fluid' >  
  15.                          <Carousel interval={600} keyboard={false} pauseOnHover={true}>  
  16.                          <Carousel.Item style={{'height':"300px"}}  >  
  17.                          <img style={{'height':"300px"}}  
  18.                          className="d-block w-100"  
  19.                         src={'assets/img/img2.jpg'}  />  
  20.                            <Carousel.Caption>  
  21.                              <h3>First Demo </h3>  
  22.                                  </Carousel.Caption>  
  23.                                  </Carousel.Item  >  
  24.                                  <Carousel.Item style={{'height':"300px"}}>  
  25.                                  <img style={{'height':"300px"}}  
  26.                                    className="d-block w-100"  
  27.                                     src={'assets/img/img1.jpg'}    />  
  28.                                        <Carousel.Caption>  
  29.                                    <h3>Second Demo</h3>  
  30.                                       </Carousel.Caption>  
  31.                                          </Carousel.Item>  
  32.                                        <Carousel.Item style={{'height':"300px"}}>  
  33.                                        <img style={{'height':"300px"}}  
  34.                                         className="d-block w-100"  
  35.                                          src={'assets/img/img3.jpg'}   />  
  36.                                         <Carousel.Caption>  
  37.                                           <h3>Third Demo</h3>  
  38.                                           </Carousel.Caption>  
  39.                                          </Carousel.Item>  
  40.                                         </Carousel>  
  41.                                 </div>  
  42.                         </div>  
  43.                 )  
  44.         }  
  45. }  
  46.   
  47. export default BootstrapCarouselDemo  
 Now open app.js file and add the following code:
  1. import React from 'react';  
  2. import logo from './logo.svg';  
  3. import './App.css';  
  4. import BootstrapCarouselDemo from './BootstrapCarouselDemo'  
  5. function App() {  
  6.   return (  
  7.     <div className="App">  
  8.       <BootstrapCarouselDemo></BootstrapCarouselDemo>  
  9.     </div>  
  10.   );  
  11. }  
  12.   
  13. 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.

Membership not found