React Bootstrap Carousel Slider Tutorial

Bootstrap Carousel allows users to slide images or text in the slider, in this tutorial, you will learn how to implement Bootstrap Carousel Slider in React JS apps.

How to use Bootstrap Carousel Slider in React JS

Steps to implement bootstrap carousel slider in react js app:

Step 1 – Create React App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install React Bootstrap

In this step, execute the following command to install react boostrap library into your react app:

npm install react-bootstrap bootstrap

Add bootstrap.min.css file in src/App.js file:

import React, { Component } from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
  return (
    <div>
      <h2>How to use  Bootstrap carousel slider in React</h2>
    </div>
  );
}
export default App;

Step 3 – Create React Bootstrap carousel component

Import import { Carousel } from ‘react-bootstrap’;'” Into your table component.

Create BootstrapCarouselComponent.js file. So, visit the src directory of your react js app and create a table component file named BootstrapCarouselComponent.js. And add the following code into it:

// src/components/bootstrap-carousel.component.js
import React from "react";
import { Carousel } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
class BootstrapCarouselComponent extends React.Component {
    render() {
        return (
            <div>
                <div className='container-fluid' >
                    <div className="row">
                        <div className="col-sm-12">
                            <h3>React Bootstrap Carousel</h3>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-12">
                            <Carousel>
                                <Carousel.Item>
                                    <img
                                        className="d-block w-100"
                                        src="https://picsum.photos/500/300?img=1"
                                        alt="First slide"
                                    />
                                    <Carousel.Caption>
                                        <h3>First slide label</h3>
                                        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                                    </Carousel.Caption>
                                </Carousel.Item>
                                <Carousel.Item>
                                    <img
                                        className="d-block w-100"
                                        src="https://picsum.photos/500/300?img=2"
                                        alt="Second slide"
                                    />
                                    <Carousel.Caption>
                                        <h3>Second slide label</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                    </Carousel.Caption>
                                </Carousel.Item>
                                <Carousel.Item>
                                    <img
                                        className="d-block w-100"
                                        src="https://picsum.photos/500/300?img=3"
                                        alt="Third slide"
                                    />
                                    <Carousel.Caption>
                                        <h3>Third slide label</h3>
                                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                                    </Carousel.Caption>
                                </Carousel.Item>
                            </Carousel>
                        </div>
                    </div>
                </div>
            </div>
        )
    };
}
export default BootstrapCarouselComponent;

Step 4 – Add React Bootstrap carousel Component in App.js

In this step, you need to add BootstrapCarouselComponent.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import BootstrapCarouselComponent from './BootstrapCarouselComponent'
function App() {  
    
  return (  
    <div className="App">  
      <BootstrapCarouselComponent />  
    </div>  
  );  
}  
export default App;

Step 5 – Properties and Methods on <Carousel/>

Following are the properties and methods available on the bootstrap Carousel component

Properties

• controls
• fade
• slide
• interval
• keyboard
• nextLabel
• prevLabel
• nextIcon
• prevIcon

Methods

• onSelect()
• onSlid()
• onSlide()

Conclusion

That’s it, you have learned how to integrate the bootstrap carousel slider in react js apps.

Recommended React JS Posts