React-Bootstrap Carousel Component Example

React bootstrap is a component-based library that provides bootstrap features as react component, We will use a Carousel component for creating a slideshow of images. The carousel component provides many events and methods to control the carousel slider, please check offical source for details Click Here.

You can download the working example of a react-bootstrap carousel component https://github.com/technostuf/reactjs-bootstrap-carousel

Create a React application
Install react-bootstrap library
Add code to the file
Run a React application

Create a React application

Create a React app using the below command.

  npx create-react-app reactjs-bootstrap-carousel

After running the above command system will create a new folder “reactjs-bootstrap-carousel” so you need to move into that folder, use the below command to change the directory.

 cd reactjs-bootstrap-dropdown

Install react-bootstrap library

After creating react app we need to install react-bootstrap and bootstrap from npm or yarn.

 npm install --save react-bootstrap bootstrap
 OR using yarn
 yarn add react-bootstrap bootstrap

Add code to the file

Create a component file to hold carousel code separate from another component and put the below code into that file. This is not necessary but I have created separate components to make our code clean and readable.

import React, { useState } from "react";
import { Carousel } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

const CarouselComponent = () => {
    const data = [
        {
            image: "https://i.picsum.photos/id/1015/6000/4000.jpg?hmac=aHjb0fRa1t14DTIEBcoC12c5rAXOSwnVlaA5ujxPQ0I",
            caption: "First Slide",
            description: "Description Here"
        },
        {
            image: "https://i.picsum.photos/id/1018/3914/2935.jpg?hmac=3N43cQcvTE8NItexePvXvYBrAoGbRssNMpuvuWlwMKg",
            caption: "Second Slide",
            description: "Description Here"
        },
        {
            image: "https://i.picsum.photos/id/1025/4951/3301.jpg?hmac=_aGh5AtoOChip_iaMo8ZvvytfEojcgqbCH7dzaz-H8Y",
            caption: "Third Slide",
            description: "Description Here"
        }
    ]

    return (
        <div>
            <h1>React-Bootstrap Carousel Component - technostuf.com</h1>
            <div className='container-fluid' >
                <div className="row">
                    <div className="col-12">
                        <Carousel>
                            {data.map((slide, i) => {
                                return (
                                    <Carousel.Item>
                                        <img
                                            className="d-block w-100"
                                            src={slide.image}
                                            alt={slide.caption}
                                        />
                                        <Carousel.Caption>
                                            <h3>{slide.caption}</h3>
                                            <p>{slide.description}</p>
                                        </Carousel.Caption>
                                    </Carousel.Item>
                                )
                            })}
                        </Carousel>
                    </div>
                </div>
            </div>
        </div>
    );
}
export default CarouselComponent;

Finally, you have to call this component file into your code, in my case I am adding it to App.js

import './App.css';
import CarouselComponent from './CarauselComponent';
function App() {
  return (
    <div className="App">
      <CarouselComponent />
    </div>
  );
}
export default App;

Run a React application

Run the React application using the following command.

 npm start

After compilation, the program opens your browser and runs http://localhost:3000/

Output

You can download the working example of a react-bootstrap carousel component.

https://github.com/technostuf/reactjs-bootstrap-carousel