Web Dev Zone
{{announcement.body}}
{{announcement.title}}
DZone > Web Dev Zone > How to Use Bootstrap Carousel in React

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.

by
Sanwar ranwa
CORE ·
Apr. 17, 20 · Web Dev Zone ·
Free Resource

Comment (0)

Save
Tweet
{{ articles[0].views | formatCount}} Views

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.

Like This Article? Read More From DZone

related article thumbnail

DZone Article
related article thumbnail

DZone Article
related refcard thumbnail

Free DZone Refcard
DOWNLOAD
Topics:
bootstrap ,react ,tutorial ,ux ,web dev

Comment (0)

Save
Tweet
{{ articles[0].views | formatCount}} Views

Opinions expressed by DZone contributors are their own.

Web Dev Partner Resources

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

{{ parent.tldr }}

{{ parent.linkDescription }}

{{ parent.urlSource.name }}
by
CORE
· {{ parent.articleDate | date:'MMM. dd, yyyy' }} {{ parent.linkDate | date:'MMM. dd, yyyy' }}
· {{ parent.portal.name }} Zone