React-Bootstrap Carousel Crossfade

React-Bootstrap is a front-end framework that was designed keeping react in mind. Carousel Component provides a way to create a slideshow for our images or text slides with a present full manner in a cyclic way.

In this article, we will learn about React-Bootstrap Carousel Crossfade. To use the crossfade animation in the carousel, we can use the fade prop to your carousel to animate slides with a fade transition instead of a slide.

Syntax:

<Carousel fade> 

• where “fade” is a prop in the carousel that animates slides with a fade transition instead of a slide.

Steps to create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install react-bootstrap 
npm install bootstrap

Project Structure: It will look like the following.

Example 1: Below is a basic implementation of the crossfade in a carousel in react bootstrap.

Javascript

import React from "react";
//import 'bootstrap/dist/css/bootstrap.css';
import Carousel from "react-bootstrap/Carousel";

export default function App() {
    return (
        <div style={{ display: "block", width: 700, padding: 30 }}>
            <h2 style={{ color: "green" }}>GeeksforGeeks</h2>
            <h2>React-Bootstrap Carousel Crossfade</h2>
            <Carousel fade>
                <Carousel.Item interval={1500}>
                    <img
                        className="d-block w-100"
                        src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png"
                        alt="JAVA"
                    />
                </Carousel.Item>
                <Carousel.Item interval={500}>
                    <img
                        className="d-block w-100"
                        src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png"
                        alt="HTML"
                    />
                </Carousel.Item>
                <Carousel.Item interval={500}>
                    <img
                        className="d-block w-100"
                        src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png"
                        alt="Angular"
                    />
                </Carousel.Item>
            </Carousel>
        </div>
    );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: In this example, we will add the caption to the carousel and see its crossfading.

Javascript

import React from "react";
//import 'bootstrap/dist/css/bootstrap.css';
import Carousel from "react-bootstrap/Carousel";

export default function App() {
    return (
        <div style={{ display: "block", width: 700, padding: 30 }}>
            <h2 style={{ color: "green" }}>GeeksforGeeks</h2>
            <h2>React-Bootstrap Carousel Crossfade</h2>
            <Carousel fade>
                <Carousel.Item interval={1500}>
                    <img
                        className="d-block w-100"
                        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210425122739/2-300x115.png"
                        alt="Image One"
                    />
                    <Carousel.Caption>
                        <h3>Label for first slide</h3>
                        <p>Sample Text for Image One</p>
                    </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item interval={500}>
                    <img
                        className="d-block w-100"
                        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210425122716/1-300x115.png"
                        alt="Image Two"
                    />
                    <Carousel.Caption>
                        <h3>Label for second slide</h3>
                        <p>Sample Text for Image Two</p>
                    </Carousel.Caption>
                </Carousel.Item>
            </Carousel>
        </div>
    );
}

Output: