DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations

Trending

  • Avoiding Pitfalls With Java Optional: Common Mistakes and How To Fix Them [Video]
  • Microservices With Apache Camel and Quarkus
  • Effective Java Collection Framework: Best Practices and Tips
  • Comparing Cloud Hosting vs. Self Hosting

Trending

  • Avoiding Pitfalls With Java Optional: Common Mistakes and How To Fix Them [Video]
  • Microservices With Apache Camel and Quarkus
  • Effective Java Collection Framework: Best Practices and Tips
  • Comparing Cloud Hosting vs. Self Hosting
  1. DZone
  2. Coding
  3. Frameworks
  4. How to Use Bootstrap Carousel in React

How to Use Bootstrap Carousel in React

Sanwar Ranwa user avatar by
Sanwar Ranwa
CORE ·
Apr. 17, 20 · Tutorial
Like (3)
Save
Tweet
Share
29.34K Views

Join the DZone community and get the full member experience.

Join For Free

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
xxxxxxxxxx
1
 
1
import Carousel from 'react-bootstrap/Carousel' 


Add the following code in this component:

JavaScript
xxxxxxxxxx
1
48
 
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:

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.

Bootstrap (front-end framework) React (JavaScript library)

Opinions expressed by DZone contributors are their own.

Trending

  • Avoiding Pitfalls With Java Optional: Common Mistakes and How To Fix Them [Video]
  • Microservices With Apache Camel and Quarkus
  • Effective Java Collection Framework: Best Practices and Tips
  • Comparing Cloud Hosting vs. Self Hosting

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: