{{announcement.body}}
{{announcement.title}}

How to Use Bootstrap Carousel in React

DZone 's Guide to

How to Use Bootstrap Carousel in React

In this article, we'll demonstrate how to create a Carousel to display images and video in React with Bootstrap.

· Web Dev Zone ·
Free Resource

Introduction

In this article, I will explain how to create a Bootstrap Carousel in React.js. A 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.

Shell
 




xxxxxxxxxx
1


 
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.  

JavaScript
 




xxxxxxxxxx
1


 
1
npm install react-bootstrap bootstrap 



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

JavaScript
 




xxxxxxxxxx
1


 
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. Then, add some demo images to this folder

File system

File system

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

JavaScript


Add the following code in this component:

JavaScript


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

JavaScript
 




xxxxxxxxxx
1
13


 
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.  

JavaScript
 




xxxxxxxxxx
1
47


 
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 the app.js file and add the following code:

JavaScript
 




xxxxxxxxxx
1
13


 
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 React.js application.

Topics:
bootstrap ,react ,tutorial ,ux ,web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}