How to create an image carousel in pure React.js

In this article, I’ll show you how you can create a simple image carousel in pure React.js.

Start by creating a new React component called “Carousel.” This component will be responsible for rendering the carousel and all of its elements.

Inside the Carousel component, create a state variable called “currentIndex” that will keep track of which slide is currently being displayed. Set its initial value to 0.

import React, { useState } from 'react';

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

  return (
    <div>
      {/* Carousel content goes here */}
    </div>
  )
}

export default Carousel;

Next, create a method called “goToNextSlide” that will increment the currentIndex state variable by 1. Make sure to add logic to handle the case where the user is on the last slide and needs to loop back to the first slide.

const goToNextSlide = () => {
  if (currentIndex === props.slides.length - 1) {
    setCurrentIndex(0);
  } else {
    setCurrentIndex(currentIndex + 1);
  }
}

Create another method called “goToPrevSlide” that will decrement the currentIndex state variable by 1. Make sure to add logic to handle the case where the user is on the first slide and needs to loop back to the last slide.

const goToPrevSlide = () => {
  if (currentIndex === 0) {
    setCurrentIndex(props.slides.length - 1);
  } else {
    setCurrentIndex(currentIndex - 1);
  }
}

Create a method called “renderSlide” that will render the slide that corresponds to the currentIndex. This method should use the currentIndex state variable to determine which slide to render.

const renderSlide = () => {
  return (
    <div>
      {props.slides[currentIndex]}
    </div>
  )
}

In the render method of the Carousel component, use the “renderSlide” method to render the current slide, and also render buttons or links to call the “goToNextSlide” and “goToPrevSlide” methods.

return (
  <div className="carousel-container">
    <button className="prev-button" onClick={goToPrevSlide}>
      Prev
    </button>
    {renderSlide()}
    <button className="next-button" onClick={goToNextSlide}>
      Next
    </button>
  </div>
)

Finally, create a styles.css file and import it in the Carousel component to style the carousel and its elements.

.carousel-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.carousel-container img {
  width: 100%;
}

.prev-button, .next-button {
  padding: 10px;
  font-size: 20px;
  background-color: #3f51b5;
  color: white;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

.prev-button {
  margin-right: 10px;
}

.next-button {
  margin-left: 10px;
}

Import the css file in the Carousel component.

To use the Carousel component, you will need to pass it an array of slides as a prop. You can do this in the parent component where you are using the Carousel component.

import Carousel from './components/Carousel';

function App() {
  const slides = [
    <img src="/images/img1.png" alt="Slide 1" />,
    <img src="/images/img2.jpeg" alt="Slide 2" />,
    <img src="/images/img3.jpeg" alt="Slide 3" />
  ];

  return (
    <div className="App">
      <Carousel slides={slides} />
    </div>
  );
}

export default App;

Test your carousel component by using it in another component and passing it some sample data as props, you should be able to see the carousel with the slides, prev and next buttons and css styles.

This is a basic example and you may need to add additional functionality such as autoplay, pagination, accessibility, etc.