Build an Exciting React Carousel Using React Hooks

• 24th Apr 2023 • 3 min read • React.js

Cover Image for Build an Exciting React Carousel Using React Hooks

In today's UI landscape, carousels have become a popular component for showcasing images, promotional materials, or even testimonials. Carousels provide a focused browsing experience while keeping the overall layout spacious and clean. In this tutorial, we will walk you through the process of creating an eye-catching React carousel using React Hooks.

Prerequisiteslink

Before beginning, make sure you have the following installed on your system:

Node.js
npm
A code editor (e.g., VSCode, Sublime Text)

Project Setuplink

First, create a new React application by running the following command in your terminal:

npx create-react-app react-carousel-hooks

Next, navigate to your newly-created project directory:

cd react-carousel-hooks

Now, install the required dependencies:

npm install

Creating the Carousel Componentlink

In the src folder, create a new folder named components. Inside the components folder, create a new file called Carousel.js. You can now start building your carousel component by following these steps:

Importing required dependencies.

import React, { useState } from "react";
import "./Carousel.css";

Initialize states for the current slide and define your slides.

const Carousel = () => {
  const [currentSlide, setCurrentSlide] = useState(0);
  const carouselItems = [
    { image: "/path/to/image1.jpg", title: "First Item" },
    { image: "/path/to/image2.jpg", title: "Second Item" },
    { image: "/path/to/image3.jpg", title: "Third Item" },
  ];

  // ...
};

Creating a function to handle slide navigation.

const changeSlide = (direction) => {
  direction === "next"
    ? setCurrentSlide((prevSlide) => {
        return prevSlide === carouselItems.length - 1 ? 0 : prevSlide + 1;
      })
    : setCurrentSlide((prevSlide) => {
        return prevSlide === 0 ? carouselItems.length - 1 : prevSlide - 1;
      });
};

Rendering the Carousel with navigation buttons.

return (
  <div className="carousel-container">
    <img src={carouselItems[currentSlide].image} alt={carouselItems[currentSlide].title} />
    <div className="carousel-navigation">
      <button onClick={() => changeSlide("prev")}>❮</button>
      <button onClick={() => changeSlide("next")}>❯</button>
    </div>
  </div>
);

Finally, export the Carousel component:

export default Carousel;

Creating the CSS filelink

Create a new file called Carousel.css inside the components folder, and add the following styles to create a visually appealing and responsive carousel:

.carousel-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.carousel-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-navigation {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
}

.carousel-navigation button {
  border: none;
  background: none;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 20px;
  transition: all 0.3s ease;
}

.carousel-navigation button:hover {
  color: rgba(255, 255, 255, 1);
}

Adding the Carousel to App.jslink

To make your carousel visible, import and add the Carousel component to your App.js file:

import React from "react";
import "./App.css";
import Carousel from "./components/Carousel";

function App() {
  return (
    <div className="App">
      <div className="carousel-container">
        <Carousel />
      </div>
    </div>
  );
}

export default App;

Now, you should be able to see your newly-created React carousel when you run the application in your browser using the command:

npm start

That's it! You've successfully built a captivating React carousel using React Hooks. By leveraging the immense power of hooks, you've efficiently implemented a dynamic and responsive carousel. This component can be readily customized and upgraded to include features like auto-scrolling, slide indicators, and touch gestures support.

Feel free to experiment and optimize the code to suit your needs. It's now time to integrate this carousel into your web applications and amaze your audience.