Create an Image Slider App with React and JavaScript

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to image slider app with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app image-slider

with NPM to create our React project.

Create the Image Slider App

To create the image slider app, we write:

import { useState } from "react";

const images = [
  "https://i.picsum.photos/id/1/200/300.jpg?hmac=jH5bDkLr6Tgy3oAg5khKCHeunZMHq0ehBZr6vGifPLY",
  "https://i.picsum.photos/id/2/200/300.jpg?hmac=HiDjvfge5yCzj935PIMj1qOf4KtvrfqWX3j4z1huDaU",
  "https://i.picsum.photos/id/3/200/300.jpg?hmac=o1-38H2y96Nm7qbRf8Aua54lF97OFQSHR41ATNErqFc"
];

export default function App() {
  const [index, setIndex] = useState(0);

  const next = () => {
    setIndex((i) => (i + 1) % images.length);
  };

  const prev = () => {
    setIndex((i) => (i - 1) % images.length);
  };

  return (
    <div className="App">
      <button onClick={prev}>&lt;</button>
      <img src={images[index]} alt="" />
      <button onClick={next}>&gt;</button>
    </div>
  );
}

We have 3 image URLs in the images array.

In the App component, we have the index state, which is set by setIndex .

We set its initial value to 0.

Then we have the next and prev functions to set the index by incrementing by 1 and then get the remainder of that by dividing by images.length .

This gets the index of the next image to show.

prev is similar except we subtract by 1 instead of add to get the index of the previous image.

We go back to the first one after we reach the last image and we’re clicking the next button.

And we show the last image after we reach the first image and click on the previous button.

Then we return JSX with buttons to call the next and prev functions when we click them.

We show the image in the img element.

We can also make an image slider that moves to the next slide automatically by writing:

import { useEffect, useState } from "react";

const images = [
  "https://i.picsum.photos/id/1/200/300.jpg?hmac=jH5bDkLr6Tgy3oAg5khKCHeunZMHq0ehBZr6vGifPLY",
  "https://i.picsum.photos/id/2/200/300.jpg?hmac=HiDjvfge5yCzj935PIMj1qOf4KtvrfqWX3j4z1huDaU",
  "https://i.picsum.photos/id/3/200/300.jpg?hmac=o1-38H2y96Nm7qbRf8Aua54lF97OFQSHR41ATNErqFc"
];

export default function App() {
  const [index, setIndex] = useState(0);

  const next = () => {
    setIndex((i) => (i + 1) % images.length);
  };

  useEffect(() => {
    const timer = setInterval(() => {
      next();
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);
  return (
    <div className="App">
      <img src={images[index]} alt="" />
    </div>
  );
}

Most of the code is the same except that we removed the prev function.

And we added the useEffect hook with a callback that calls next every second with setInterval .

We return a callback to call clearIntveral to clear the timer when we unmount the component.

The empty array in the 2nd argument lets us run the useEffect callback only when we mount the component.

Conclusion

We can create an image slider easily with React and JavaScript.