Simple Carousel in React js

Next, open up the App.js file located in the src folder. You should see this:

 App.js 
import React, {useState, useEffect} from 'react';
import axios from 'axios';
import Carousel from "./components/Carousel/Carousel"
import './App.css';

function App() {
  const [isLoading, setLoading] = useState(false)
  const [isError, setError] = useState(false)
  const [isdata, setData] = useState({});
 
  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      setError(false);
      axios.get("http://localhost:8080/ViewImage")
        .then(res => { // then print response status
          if(res.data.success === true){
            setData(res.data.listall);
            setLoading(true);
          }
        })
    } catch (error) { setError(true); }
  };

return (<>
    {isError && <div>Something went wrong ...</div>}
    <div className="banners">
          {isLoading === false ? (
            <div>Loading ...</div>
          ) : ( <>
            <Carousel show={3} >
            {isdata.map((item, index) => (
                <div  key={item.id} >
                  <div className="carousel__sec">
                    <img className="image-card" src={item.image} style={{width: '100%'}}/>
                    <h2> {item.title} </h2>
                  </div>
              </div>
              ))}  
            </Carousel>
        </> )}
    </div>
    {/* Json output */}
    <pre>{JSON.stringify(isdata, null, 2)} </pre>
    
</>
  );
}
export default App;

Carousel.js 
import React, { useEffect, useState } from 'react'
import { BsArrowLeftShort,BsArrowRightShort} from "react-icons/bs";
import './carousel.css'

const Carousel = (props) => {
    const {children, show} = props
    const [currentIndex, setCurrentIndex] = useState(0)
    const [length, setLength] = useState(children.length)
    const [touchPosition, setTouchPosition] = useState(null)

    // Set the length to match current children from props
    useEffect(() => {
        setLength(children.length)
    }, [children])

    const next = () => {
        if (currentIndex < (length - show)) {
            setCurrentIndex(prevState => prevState + 1)
        }
    }

    const prev = () => {
        if (currentIndex > 0) {
            setCurrentIndex(prevState => prevState - 1)
        }
    }

    const handleTouchStart = (e) => {
        const touchDown = e.touches[0].clientX
        setTouchPosition(touchDown)
    }

    const handleTouchMove = (e) => {
        const touchDown = touchPosition

        if(touchDown === null) {
            return
        }

        const currentTouch = e.touches[0].clientX
        const diff = touchDown - currentTouch

        if (diff > 5) {
            next()
        }

        if (diff < -5) {
            prev()
        }

        setTouchPosition(null)
    }

    return (
        <div className="carousel-container">
            <div className="carousel-wrapper">
                {/* You can alwas change the content of the button to other things */}
                {
                    currentIndex > 0 &&
                    <button onClick={prev} className="left-arrow">
                        <BsArrowLeftShort />
                    </button>
                }
                <div className="carousel-content-wrapper" onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} >
                    <div className={`carousel-content show-${show}`} style={{ transform: `translateX(-${currentIndex * (100 / show)}%)` }}  >
                        {children}
                    </div>
                </div>
                {/* You can alwas change the content of the button to other things */}

                { currentIndex < (length - show) &&
                    <button onClick={next} className="right-arrow">
                        <BsArrowRightShort />
                    </button>
                }

            </div>
        </div>
    )
}
export default Carousel

carousel.css 
.carousel-container {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.carousel-wrapper {
    display: flex;
    width: 100%;
    position: relative;
}

.carousel-content-wrapper {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.carousel-content {
    display: flex;
    transition: all 250ms linear;
    -ms-overflow-style: none;  /* hide scrollbar in IE and Edge */
    scrollbar-width: none;  /* hide scrollbar in Firefox */
}

/* hide scrollbar in webkit browser */
.carousel-content::-webkit-scrollbar, .carousel-content::-webkit-scrollbar {
    display: none;
}

.carousel-content > * {
    width: 100%;
    flex-shrink: 0;
    flex-grow: 1;
}

.carousel-content.show-2 > * {
    width: 50%;
}

.carousel-content.show-3 > * {
    width: calc(100% / 3);
}

.carousel-content.show-4 > * {
    width: calc(100% / 4);
}
.carousel-content.show-5 > * {
    width: calc(100% / 5);
}

.left-arrow, .right-arrow {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 24px;
    background-color: white;
    border: 1px solid #ddd;
}

.left-arrow {
    left: 24px;
}
.left-arrow svg{
    font-size: 30px;
    vertical-align: middle;
}
.right-arrow svg{
    font-size: 30px;
    vertical-align: middle;
}
.right-arrow {
    right: 24px;
}
.carousel__sec{padding: 17px;}

@media (hover: none) and (pointer: coarse) {
    .left-arrow, .right-arrow {
        display: none;
    }
}