How to Create Image Slider in ReactJS?

npx create-react-app react-project

npm i react-responsive-carousel bootstrap

import "react-responsive-carousel/lib/styles/carousel.min.css";
import "bootstrap/dist/css/bootstrap.min.css";
import { Carousel } from "react-responsive-carousel";

import React from "react";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import "bootstrap/dist/css/bootstrap.min.css";
import { Carousel } from "react-responsive-carousel";

function CarouselComponent() {

  const onChange = (event) => {
    console.log(event);
  };

  return (
    <div classname="container carousel-wrapper">
        <Carousel infiniteLoop="true" autoPlay="true" onChange={onChange}>
            <div>
                <img decoding="async" classname="image1" src="https://picsum.photos/500/300?img=1" alt="image1">
                <p className="legend">Heading 1</p>
            </div>
            <div>
                <img decoding="async" classname="image2" src="https://picsum.photos/500/300?img=2" alt="image2">
                <p className="legend">Heading 2</p>
            </div>
            <div>
                <img decoding="async" classname="image3" src="https://picsum.photos/500/300?img=3" alt="image3">
                <p className="legend">Heading 3</p>
            </div>
        </Carousel>
    </div>
  );
  
}

export default CarouselComponent;

import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";
import CarouselComponent from "./CarouselComponent.js";

export default function App() {
    return (
        <div classname="card text-center text-white bg-dark">
            <div classname="card-body">
                <h1>React Responsive Carousel</h1>

                <CarouselComponent />
            </div>
        </div>
    );
}

const data = [
    {
        src: "https://picsum.photos/500/300?img=1",
        alt: "image1"
    },
    {
        src: "https://picsum.photos/500/300?img=2",
        alt: "image2"
    },
    {
        src: "https://picsum.photos/500/300?img=3",
        alt: "image3"
    },
];

<Carousel infiniteLoop="true" autoPlay="true" onChange={onChange}>
    {
        data.map((image, index) => {
            return (
                <div key="{index}">
                  <img src={image.src} alt={image.alt} />
                </div>
            );
        })
    }
</Carousel>

<Carousel
    showThumbs="false"
    infiniteLoop="true"
    autoPlay="true"
    onChange={onChange}
>
    <div>
        <img decoding="async" classname="image1" src="https://picsum.photos/500/300?img=1" alt="image1">
        <div classname="card text-dark pb-5">
            <div classname="card-body">
                <h5 className="card-title">Slide Card 1</h5>
                <p className="card-text">
                    Lorem Ipsum is simply dummy text of the printing and typesetting
                    industry. Lorem Ipsum has been the industry's standard dummy
                    text ever since the 1500s
                </p>
                <a href="/" className="btn btn-warning">
                    Click here
                </a>
            </div>
        </div>
    </div>
    <div>
        <img decoding="async" classname="image2" src="https://picsum.photos/500/300?img=2" alt="image2">
        <div classname="card text-dark pb-5">
            <div classname="card-body">
                <h5 className="card-title">Slide Card 2</h5>
                <p className="card-text">
                    It is a long-established fact that a reader will be distracted
                    by the readable content of a page when looking at its layout.
                </p>
                <a href="/" className="btn btn-primary">
                    Click here
                </a>
            </div>
        </div>
    </div>
    <div>
        <img decoding="async" classname="image3" src="https://picsum.photos/500/300?img=3" alt="image3">
        <div classname="card text-dark pb-5">
            <div classname="card-body">
                <h5 className="card-title">Slide Card 3</h5>
                <p className="card-text">
                    Contrary to popular belief, Lorem Ipsum is not simply random
                    text. It has roots in a piece of classical Latin literature from
                    45 BC, making it over 2000 years old.
                </p>
                <a href="/" className="btn btn-success">
                    Click here
                </a>
            </div>
        </div>
    </div>
</Carousel>