React Carousel: Building the Component from Scratch vs. Using a Library 

In this tutorial, I'll show you how to create a simple React carousel from scratch, using hooks, and how to build the component using the React-slick library.

When you start a new React project, it's tempting to build your entire UI library from scratch, as you have all the freedom in the world to create the components however you like them and to structure your code in a way that makes sense for the team. 

Yet, using a library seems like a better option when you need to deliver faster. You can still customize the components and most of the work is already done, so if you're not bothered by the generic look, you can copy-paste the code and you're ready to go. 

I won't detail all the pros and cons of using libraries, but as a general principle, if you're concerned with the size of your bundle, dislike the bland design of ready-made components, or you anticipate frequent changes in design due to stakeholder requests, for example, it's better to build your own components. 

So in this tutorial, we'll explore both options: first, we'll build a React carousel from scratch, then we'll create a separate slider component using one of the popular libraries. 

By the end of this post, you will know how to create a basic React carousel component using hooks, and how to use an out-of-the-box slider component with the React-slick library.

As this tutorial doesn't cover the basics of React, to make the most of it, you should already be familiar with: 

We'll build our component in a React sandbox, so go ahead and create a new project, then add styled components as a dependency. 

Since we’re building the slider from scratch, we’ll have at least two separate components: one for the slider, and one for the images. So let’s go ahead and create a new folder under 

, for the components. Your project structure should look like below.

Our main component, the carousel, will be imported in the 

import "./styles.css";
import Slider from "./components/Slider.js";

const ImageData = [];

export default function App() {
  return <Slider slides={ImageData} />;
}

The images will be stored in an array, and passed as props. 

Next, let's get some images to display in the carousel. I want to use some kitty pictures from Unsplash, but I don't want to store them in a separate folder inside the project. Instead, I want to use the API, so I need the GET endpoint, which looks like this: 

https://api.unsplash.com/search/photos?query=cats&client_id=

To be able to use this endpoint you'll have to 

, so go ahead and do that first. We won't expose the client ID here, so no need to worry about that. 

Next, add your client ID to the query to retrieve some kitty images. I'll get 4 images and add the URLs to the ImageData array, as follows: 

const ImageData = [
  {
    image:
      "https://images.unsplash.com/photo-1546190255-451a91afc548?ixlib=rb-1.2.1",
  },
  {
    image:
      "https://images.unsplash.com/photo-1591348122449-02525d70379b?ixlib=rb-1.2.1",
  },
  {
    image:
      "https://images.unsplash.com/photo-1548802673-380ab8ebc7b7?ixlib=rb-1.2.1",
  },
  {
    image:
      "https://images.unsplash.com/photo-1577023311546-cdc07a8454d9?ixlib=rb-1.2.1",
  },
];

Here I'm using the raw images, but you can get them in different sizes if you prefer. Check 

import "./styles.css";
import Slider from "./components/Slider.js";

const ImageData = [
  {
    image:
      "https://images.unsplash.com/photo-1546190255-451a91afc548?ixlib=rb-1.2.1",
  },
  {
    image:
      "https://images.unsplash.com/photo-1591348122449-02525d70379b?ixlib=rb-1.2.1",
  },
  {
    image:
      "https://images.unsplash.com/photo-1548802673-380ab8ebc7b7?ixlib=rb-1.2.1",
  },
  {
    image:
      "https://images.unsplash.com/photo-1577023311546-cdc07a8454d9?ixlib=rb-1.2.1",
  },
];

export default function App() {
  return <Slider slides={ImageData} />;
}

Now we can create the image component. Let’s add a new file under 

. I'll use styled components as I find it more convenient. 

import styled from "styled-components";

export const SlideImage = styled.img`
  width: 400px;
  height: 300px;
  object-fit: cover;
`;

export const StyledSlider = styled.div`
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
`;

We can start building the final slider component. Let’s create a separate file called 

import React, { useState } from "react";
import { SlideImage, StyledSlider } from "./SlideImage";

import {
  FaChevronRight,
  FaChevronLeft,
} from "react-icons/fa";

const Slider = ({ slides }) => {
  const [current, setCurrent] = useState(0);
  const length = slides.length;

  const nextSlide = () => {
    setCurrent(current === length - 1 ? 0 : current + 1);
  };

  const prevSlide = () => {
    setCurrent(current === 0 ? length - 1 : current - 1);
  };

  return (
    <StyledSlider>
      <FaChevronLeft
        className="left-arrow"
        onClick={prevSlide}
      />
      <FaChevronRight
        className="right-arrow"
        onClick={nextSlide}
      />
      {slides.map((slide, index) => {
        return (
          <div key={index}>
            {index === current && (
              <SlideImage src={slide.image} alt="" />
            )}
          </div>
        );
      })}
    </StyledSlider>
  );
};

export default Slider;


So let's see what's happening in this component. First, I've added another library for some icons, so that we can add arrows on the sides. The library used here is 

, but you can use whatever you prefer, or build your own arrows. 

 // styles.css 

.App {
  font-family: sans-serif;
  text-align: center;
}

.rightArrow {
  position: absolute;
  top: 50%;
  right: 20px;
  font-size: 2rem;
}

.leftArrow {
  position: absolute;
  top: 50%;
  left: 20px;
  font-size: 2rem;
}

Now we have the arrows, but we need the slides to move when we click them. So we'll use the 

 hook to set the current index of the images, and move to the previous or next slide when the arrows are clicked. 

I'll explain this part separately. So first we're declaring a new state variable, which is "current" in our case, as we want it to define the index of the current slide. Then, we're defining the functions that will change the state: 

 function is called, and what this function does is check the index of the current slide, the subtract one, to display to the previous slide. 

const [current, setCurrent] = useState(0);
  const length = slides.length;

  const nextSlide = () => {
    setCurrent(current === length - 1 ? 0 : current + 1);
  };

  const prevSlide = () => {
    setCurrent(current === 0 ? length - 1 : current - 1);
  };

 function checks the index of the current image and adds one, unless the current index is 3, which means that the image is the last one in the carousel.

Don't forget that the indexes for the ImageData array start at 0, so the current index 3 actually means that we're referring to the 4th image of the slider, which is the last one. So in this case, the next image to display will be the one with index 0. 

That's it, you should now have a functional carousel that looks like this: 

For the second part of this tutorial, I’ll use the 

 library for building the carousel component. 

Let's go ahead and create a new sandbox, and add 

 as dependencies. Your project structure should look like this. 

To make use of the CSS that this library comes with, you’ll have to import the styles. For this tutorial, I’ll import them directly in the 

// styles.css

@import url("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css");

We’ll build the carousel directly in the 

 file, so let’s import from the Slider from the library and start building the component: 

import { Component } from "react";
import "./styles.css";

import Slider from "react-slick";

const images = [ ];

export default class Carousel extends Component {
  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 1000,
      slidesToShow: 2,
      slidesToScroll: 1,
      className: "slides",
    };

    return (
      <Slider {...settings}>
        {images.map((image) => {
          return (
            <div className="wrapper" key="">
              <img
                className="sliderImg"
                src=""
                alt=""
              />
            </div>
          );
        })}
      </Slider>
    );
  }
}

I've added an empty array for the images that I want to include in the carousel, so we can use the .map method later on and display them one by one. We'll get back to this array in a few minutes, but first, let's solve the styling.  

As you can see above, there are some classes in the slider, so let's now define them in the 

// styles.css 

@import url("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css");

.wrapper {
  display: block;
}

.sliderImg {
  display: block;
  box-sizing: border-box;
  height: 300px;
  width: 100%;
  padding: 0px 2vw;
  object-fit: cover;
}

Now let's go back to the carousel images. Update the 

const images = [
  {
    id: "1",
    name: "Kitty 1",
    alt: "",
    url: img1
  },
  {
    id: "2",
    name: "Kitty 2",
    alt: "",
    url: img2
  },
  {
    id: "3",
    name: "Kitty 3",
    alt: "",
    url: img3
  },
  {
    id: "4",
    name: "Kitty 4",
    alt: "",
    url: img4
  }
];

I've downloaded some pictures from Unsplash, and added them in the 

import Slider from "react-slick";

import img1 from "./images/aleesha-wood-dm-ApvBj0nI-unsplash.jpg";
import img2 from "./images/abed-ismail-m5tDtR_bZcU-unsplash.jpg";
import img3 from "./images/kelvin-yup-GChKfv2_PfM-unsplash.jpg";
import img4 from "./images/priscilla-du-preez-8NXmaXg5xL0-unsplash.jpg";

And now let's finalize the carousel code: 

export default class Carousel extends Component {
  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 1000,
      slidesToShow: 2,
      slidesToScroll: 1,
      className: "slides",
    };

    return (
      <Slider {...settings}>
        {images.map((image) => {
          return (
            <div className="wrapper" key={image.id}>
              <img
                className="sliderImg"
                src={image.url}
                alt={image.alt}
              />
              <p>{image.name}</p>
            </div>
          );
        })}
      </Slider>
    );
  }
}

The image URL, alt text, and name are now passed as props.  

A few words on the settings of the carousel: 

 const settings = {
      dots: true,
      arrows: true,
      infinite: true,
      speed: 1000,
      slidesToShow: 2,
      slidesToScroll: 1,
      className: "slides",
    };

, which just means that the dots are displayed under the carousel, and the images are displayed in an infinite loop. The 

 property determines how many images the user sees in one frame, and the 

 determines how many images you can scroll at once. 

 property defines the animation speed in milliseconds and the 

If, for example, you want the slider to be displayed vertically instead of horizontally, you can easily do this by adding the 

I'll adjust the styling of the carousel a bit, to center the pictures and titles. Here's the updated code: 

// styles.css

@import url("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css");

.wrapper {
  display: flex !important;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.sliderImg {
  box-sizing: border-box;
  height: 300px;
  width: 400px;
  padding: 0px 2vw;
  object-fit: cover;
}

.imgTitle {
  font-weight: 900;
}

Your carousel with React-slick should look like this: 

If you want to display a single picture at once, change the 

Also, to display arrows as we did in the previous carousel, you'll need to do some adjustments to the CSS. So in the 

@import url("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css");

.wrapper {
  display: flex !important;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  position: relative;
}

.sliderImg {
  box-sizing: border-box;
  height: 300px;
  width: 400px;
  padding: 0px 2vw;
  object-fit: cover;
}

.imgTitle {
  font-weight: 900;
}

.slides .slick-prev,
.slides .slick-next {
  position: absolute;
  top: 50%;
  z-index: 1;
  background-color: black;
}

.slides .slick-prev {
  left: 5%;
}

.slides .slick-next {
  right: 5%;
}

Now you'll have a carousel that looks more like the previous one. You can find the 

As you can see, the second option - using a library - is much faster and quite straightforward. Thus, if you need to build a React carousel component in a short time and you're not too worried about bundle size or design variations, using the React-slick library is more efficient. 

a more detailed tutorial on React-slick here

, or continue learning React in a more structured manner with the 

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

React Carousel: Building the Component from Scratch vs. Using a Library

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript