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() {
  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. }
  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. }
  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'
  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. }
  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. }
  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.