Carousel in React

In this article, we will learn how to create a Carousel in the React.js application using React Bootstrap. Carousel is a slideshow component, and it slides images and content.

Prerequisites of React

• Familiarity with HTML and JavaScript.
• node.js installed

Create Carousel React Project

To create a React app, use the following command in the terminal.

npx create-react-app matui

React Bootstrap

Now install Bootstrap by using the following command.

npm install react-bootstrap bootstrap

Now, open the index.js file and add the import Bootstrap.

import 'bootstrap/dist/css/bootstrap.min.css';

Now right-click on the src folder, create a new component named 'Carouseldemo.js', and follow the code.

import { Height } from '@mui/icons-material';
import Carousel from 'react-bootstrap/Carousel';
import './App.css';
function Carouseldemo1() {
  return (
    <Carousel data-bs-theme="dark">
      <Carousel.Item>
        <img
          className="d-block w-100 sliderimg"
          src="https://picsum.photos/200/300?grayscale"
          alt="First slide"
        />
        <Carousel.Caption>
          <h5>First slide label</h5>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <img 
          className="d-block w-100 sliderimg"
          src="https://picsum.photos/200"
          alt="Second slide"
        />
        <Carousel.Caption>
          <h5>Second slide label</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <img
          className="d-block w-100 sliderimg"
          src="https://picsum.photos/seed/picsum/200/300"
          alt="Third slide"
        />
        <Carousel.Caption>
          <h5>Third slide label</h5>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
          </p>
        </Carousel.Caption>
      </Carousel.Item>
    </Carousel>
  );
}

export default Carouseldemo1;

Now, import the Carouseldemo component in the src/App.js file.

import './App.css';
import Carouseldemo1 from './Carouseldemo'
function App() {
  return (
    <div className="App">
      <Carouseldemo1/>
    </div>
  );
}

export default App;

Now, open src/App.css file, and add the following classes.

.App {
  text-align: center;
}
.sliderimg{
  height: 450px;
  width: 100px;
}

Now, run the project using the 'npm start' command and check the result.

Summary

In this article, we learned how to create a Carousel in the React.js application.