How to Create a Simple Carousel/Slider in React

A carousel (or slider) is a great way to display a series of images or content, one at a time. You can use buttons to navigate through them. Let's take a look at how you can build a simple carousel using React.

import { useEffect, useState } from 'react';
import { shortList, list, longList } from '../data';
import { FaQuoteRight } from 'react-icons/fa';
import { FiChevronLeft, FiChevronRight } from 'react-icons/fi';

const Carousel = () => {
  const [people, setPeople] = useState(longList);
  const [currentPersonIndex, setCurrentPersonIndex] = useState(0);

  const prevSlide = () => {
    // const prevIndex =
    //   currentPersonIndex === 0 ? people.length - 1 : currentPersonIndex - 1;
    // setCurrentPersonIndex(prevIndex);

    setCurrentPersonIndex((oldIndex) => {
      const newIndex = (oldIndex - 1 + people.length) % people.length;

      return newIndex;
    });
  };

  const nextSlide = () => {
    // const nextIndex =
    //   currentPersonIndex === people.length - 1 ? 0 : currentPersonIndex + 1;
    // setCurrentPersonIndex(nextIndex);

    setCurrentPersonIndex((oldIndex) => {
      const newIndex = (oldIndex + 1) % people.length;

      return newIndex;
    });
  };

  useEffect(() => {
    const sliderId = setInterval(() => {
      nextSlide();
    }, 2000);

    return () => {
      clearInterval(sliderId);
    };
  }, [currentPersonIndex]);

  return (
    <section className='slider-container'>
      {people.map((person, personIndex) => {
        const { id, name, image, title, quote } = person;
        return (
          <article
            key={id}
            className='slide'
            style={{
              transform: `translateX(${
                100 * (personIndex - currentPersonIndex)
              }%)`,
              opacity: personIndex === currentPersonIndex ? 1 : 0,
              visibility:
                personIndex === currentPersonIndex ? 'visible' : 'hidden',
            }}
          >
            <img src={image} alt={name} className='person-img' />
            <h5 className='name'>{name}</h5>
            <p className='title'>{title}</p>
            <p className='text'>{quote}</p>
            <FaQuoteRight className='icon' />
          </article>
        );
      })}

      <button type='button' className='prev' onClick={prevSlide}>
        <FiChevronLeft />
      </button>

      <button type='button' className='next' onClick={nextSlide}>
        <FiChevronRight />
      </button>
    </section>
  );
};
export default Carousel;

Explanation of the Functions: nextSlide and prevSlide

1. nextSlide Function:

The nextSlide function moves the carousel to the next person in the list.

const nextSlide = () => {
  setCurrentPersonIndex((oldIndex) => {
    const newIndex = (oldIndex + 1) % people.length;
    return newIndex;
  });
};

How it works:

• The function first looks at the current person’s index, which is stored in currentPersonIndex.
• It then adds 1 to this index (oldIndex + 1) to go to the next person.

• The % people.length is used to ensure that when the index reaches the end of the list (e.g., at the last person), it wraps around to the first person again.

  • For example, if you are at the last person (index 4) and press "next", it will wrap back to person 0 (the first person).

Example:

• If currentPersonIndex = 3 (person 4), then oldIndex + 1 = 4. But, because the list has 5 people (indexes 0 to 4), using % 5 gives us 4 % 5 = 0, which means it will go back to the first person.

2. prevSlide Function:

The prevSlide function moves the carousel to the previous person in the list.

const prevSlide = () => {
  setCurrentPersonIndex((oldIndex) => {
    const newIndex = (oldIndex - 1 + people.length) % people.length;
    return newIndex;
  });
};

How it works:

• The function first looks at the current person’s index, stored in currentPersonIndex.
• It then subtracts 1 from this index (oldIndex - 1) to go to the previous person.

• The addition of people.length ensures that if the index goes below 0 (e.g., when we are at the first person and want to go back), it wraps around to the last person.

  • For example, if you are at the first person (index 0) and press "prev", it will wrap back to the last person (index 4).

Example:

• If currentPersonIndex = 0 (person 1), then oldIndex - 1 = -1. Adding people.length gives us -1 + 5 = 4. When we apply % 5, we get 4 % 5 = 4, which takes us to the last person.

Key Points to Remember:

• % people.length is what makes the carousel wrap around: going from the first to the last person, and vice versa.
• The prevSlide function subtracts 1 to go backward, while nextSlide adds 1 to go forward.
• Both functions update the currentPersonIndex, which determines which person is shown in the carousel.

Comments

[Mohamed Idris]

To help remember the prevSlide logic, think of it like you're navigating a circular list. When you want to go to the previous item (in this case, the previous person in the carousel), subtracting 1 from the current index makes sense — but there's one tricky situation: when you're already at the first person (index 0). If we subtract 1 from 0, we end up with -1, which isn't valid because the index can't be negative.

That’s where adding + people.length comes in. By adding the total number of people in the list, we effectively "shift" the index into the positive range. This makes sure that, even when you try to move backward from the first person, the modulo operator (%) wraps the index around to the last person, ensuring the carousel behaves in a circular way.

So, when we subtract 1, we get the correct index for the previous person, and adding + people.length ensures that any negative numbers get turned into valid positive indices.

This solution is brilliant because it keeps things simple: no need for extra checks or complicated conditions. It uses modular arithmetic (the % operator) to create smooth navigation in a circular list with minimal code!