Introduction

In this article, I'm going to show how to create custom React components for an image slider that will fetch the data from the API and load it in our React application.

Requirement

Step 1. We need to create a new React app using the below command.

npx create-react-app image-slider

Open the folder in the VS Code and then open the command prompt to install the React icons page.

npm install react-icons

Step 2. Create a new folder named components and then a new file named ImageSlider.js and add the following code.

import { useEffect, useState } from "react";
import { BsArrowLeftCircleFill, BsArrowRightCircleFill } from "react-icons/bs";
import "./styles.css";

function ImageSlider({ url, page = 1, limit = 5 }) {
  const [photos, setPhotos] = useState([]);
  const [currentSlide, setCurrentSlide] = useState(0);
  const [loading, setLoading] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);

  async function fetchPhotos(getUrl) {
    try {
      setLoading(true);

      const response = await fetch(`${getUrl}?page=${page}&limit=${limit}`);
      const data = await response.json();

      if (data) {
        setPhotos(data);
        setLoading(false);
      }
    } catch (e) {
      setErrorMessage(e.message);
      setLoading(false);
    }
  }

  useEffect(() => {
    if (url !== "") {
      fetchPhotos(url);
    }
  }, [url]);

  function handlePrevious() {
    setCurrentSlide(currentSlide === 0 ? photos.length - 1 : currentSlide - 1);
  }

  function handleNext() {
    setCurrentSlide(currentSlide === photos.length - 1 ? 0 : currentSlide + 1);
  }

  console.log(photos);
  if (loading) {
    return <div>Loading...</div>;
  }

  if (errorMessage !== null) {
    return <div>Error Occured !{errorMessage}</div>;
  }
  return (
    <div className="container">
      <BsArrowLeftCircleFill  onClick={handlePrevious} className="arrow left-arrow" />
      {photos && photos.length
        ? photos.map((imageItem, index) => (
            <img
              src={imageItem.download_url}
              alt={imageItem.author}
              key={imageItem.id}
              className={
                currentSlide === index
                  ? "current-image"
                  : "current-image hide-current-image"
              }
            />
          ))
        : null}

      <BsArrowRightCircleFill  onClick={handleNext} className="arrow right-arrow" />
      <span className="circle-indicators">
        {photos && photos.length
          ? photos.map((_, index) => (
              <button
                key={index}
                className={
                  currentSlide === index
                    ? "current-indicator"
                    : "current-indicator inactive-indicator"
                }
                onClick={() => setCurrentSlide(index)}
              ></button>
            ))
          : null}
      </span>
    </div>
  );
}

export default ImageSlider;

Step 3. Then, create a Styles.css to add the styles for our image slider.

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600px;
  height: 450px;
}

.current-image {
  border-radius: 0.5rem;
  box-shadow: 0px 0px 7px #666;
  width: 100%;
  height: 100%;
}

.arrow {
  position: absolute;
  width: 2rem;
  height: 2rem;
  color: #fff;
  filter: drop-shadow(0px 0px 5px #555);
}

.left-arrow {
  left: 1rem;
}

.right-arrow {
  right: 1rem;
}

.circle-indicators {
  display: flex;
  position: absolute;
  bottom: 1rem;
}

.current-indicator {
  background-color: #ffffff;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  border: none;
  outline: none;
  margin: 0 0.2rem;
  cursor: pointer;
}

.hide-current-image {
  display: none;
}

.inactive-indicator {
  background-color: gray;
}

Now, we need to use the ImageSlider Component in the App.js file by removing the default and using the below code.

import ImageSlider from "./components/ImageSlider";
function App() {
  return (
    <div className="App">
      <ImageSlider
        url="https://picsum.photos/v2/list"
        page={"2"}
        limit={"10"}
      />
    </div>
  );
}

export default App;

We are fetching the images from the API Endpoint https://picsum.photos/v2/list?page=2&limit=10 but we need to provide the page and limit parameters as per our requirement.

Then, you can run your application, and we can see the image slider locally in our React app.

React app

This is the explanation of the code that we used on the Image Slider component.