Building a Simple and Efficient Image Carousel in React using Circular Array Indexing

Image carousels are a popular feature in modern web development, especially for e-commerce platforms and portfolio websites. They allow users to browse through multiple images in a compact and interactive manner. In this article, I'll walk you through building a basic image carousel in React, using a technique called Circular Array Indexing to handle seamless transitions. You can check out the full code on my GitHub repository or reading this article will be enough.

Note: For styling Tailwind CSS is used here

What is Circular Array Indexing?

Circular Array Indexing is a technique used to handle arrays in a circular manner. When an index reaches the end of an array, it wraps around to the beginning, and vice versa. This is particularly useful for creating carousels, where you want to loop through images infinitely.

1. Creating the Carousel Component

Here's the complete code for the Carousel component:

import { useState } from "react";

const IMAGE_URLS = [
  "https://s.alicdn.com/@sc04/kf/H8b92917429e046099a56d5aa27c360b9I.jpg",
  "https://s.alicdn.com/@sc04/kf/Ha349a51c40284e0f83f9d1dba94e1841l.jpg",
  "https://s.alicdn.com/@sc04/kf/H3ed53fc664a64d46b3d071e1464aa53bU.jpg",
];

const Carousel = ( ) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  const handleNext = ( ) => {
    setCurrentIndex((currentIndex + 1) % IMAGE_URLS.length);
  };

  const handlePrevious = ( ) => {
    setCurrentIndex((currentIndex - 1 + IMAGE_URLS.length) % IMAGE_URLS.length);
  };

  return (
    <div className="flex flex-row justify-center mt-36">
      <div className="flex w-1/3 justify-center items-center p-6 bg-gray-100 rounded-xl shadow-lg">
        <button
          className="mx-4 bg-blue-500 text-white px-6 py-2 rounded-full hover:bg-blue-600 transition duration-300 ease-in-out"
          onClick={handlePrevious}
        >
          Previous
        </button>
        <img
          alt="Product"
          className="w-64 h-64 object-cover rounded-lg mx-4"
          src={IMAGE_URLS[currentIndex]}
        />
        <button
          className="mx-4 bg-blue-500 text-white px-6 py-2 rounded-full hover:bg-blue-600 transition duration-300 ease-in-out"
          onClick={handleNext}
        >
          Next
        </button>
      </div>
    </div>
  );
};

export default Carousel;
        

Initializing State:

const [currentIndex, setCurrentIndex] = useState(0);        

We use useState to keep track of the current index of the image being displayed, and we have added index at the end of IMAGE_URLS[index_numbers_of_images]

<img 
           alt="Product" 
           className="w-64 h-64 object-cover rounded-lg mx-4" 
           src={IMAGE_URLS[currentIndex]} 
 />        

Next Button Handler with Circular Array Indexing:

const handleNext = ( ) => {
  setCurrentIndex((currentIndex + 1) % IMAGE_URLS.length);
};        

This function increments the current index by 1. The modulo operation (% IMAGE_URLS.length) ensures the index wraps around to 0 when it reaches the end of the array. For example, if the currentIndex is 2 (the last image in the array), (currentIndex + 1) % IMAGE_URLS.length will be (2 + 1) % 3, which equals 0, thus looping back to the first image.

Previous Button Handler with Circular Array Indexing:

const handlePrevious = ( ) => {
  setCurrentIndex((currentIndex - 1 + IMAGE_URLS.length) % IMAGE_URLS.length);
};        

This function decrements the current index by 1. By adding the length of the array before applying the modulo operation, we ensure the index wraps around to the last image when it goes below 0. For example, if the currentIndex is 0 (the first image in the array), (currentIndex - 1 + IMAGE_URLS.length) % IMAGE_URLS.length will be (-1 + 3) % 3, which equals 2, thus looping back to the last image.

2. Integrating the Carousel into Your App

Import and use the Carousel component in your main application file (App.jsx):

import Carousel from "./components/Carousel";

const App = () => (
  <div>
    <Carousel />
  </div>
);

export default App;        

And that’s it! You've successfully built a simple and efficient image carousel in React. This component uses Circular Array Indexing to handle the index wrapping, ensuring a smooth user experience. Feel free to customize and integrate it into your projects. Check out the full code on my GitHub repository. Give it a try in your next project! 🚀