Bootstrap Carousel Slider in React Apps

React bootstrap carousel slider example; In this tutorial, i will show you in detail how to integrate bootstrap carousel slider in react js apps.

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

React Bootstrap Carousel Slider Example Tutorial

  • Step 1 – Create React App
  • Step 2 – Install React Bootstrap
  • Step 3 – Create React Bootstrap carousel component
  • Step 4 – Import React Bootstrap carousel Component in App.js

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

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

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

Import 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;

Conclusion

React bootstrap carousel slider example; In this tutorial, you have learned how to integrate the bootstrap carousel slider in react js apps.

Recommended React Tutorials

Leave a Comment