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.
WYWL: What You Will Learn#
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.
Prerequisites - What You Need To Know#
As this tutorial doesn't cover the basics of React, to make the most of it, you should already be familiar with:
Tutorial: React Carousel from Scratch#
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
src, for the components. Your project structure should look like below.
Our main component, the carousel, will be imported in the
App.js file, which will look like this:
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:
To be able to use this endpoint you'll have to create a dev account on Unsplash, 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:
Here I'm using the raw images, but you can get them in different sizes if you prefer. Check the documentation here for more options.
So the final
App.js file looks like this:
Now we can create the image component. Let’s add a new file under
components, and call it
SlideImage.js. I'll use styled components as I find it more convenient.
We can start building the final slider component. Let’s create a separate file called
Slider.js, and import these two.
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
react-icons, but you can use whatever you prefer, or build your own arrows.
Then, I've added some styling in the
styles.cssfile for the arrows, to position them:
Now we have the arrows, but we need the slides to move when we click them. So we'll use the
useState 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:
When the left arrow is clicked, the
prevSlide 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.
In the same manner, the
nextSlide 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:
You can see the final code here.
Tutorial: React Carousel with Library#
For the second part of this tutorial, I’ll use the
React-slick library for building the carousel component.
Let's go ahead and create a new sandbox, and add
slick-carousel 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
We’ll build the carousel directly in the
App.js file, so let’s import from the Slider from the library and start building the component:
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
Now let's go back to the carousel images. Update the
imagesarray as follows:
I've downloaded some pictures from Unsplash, and added them in the
srcfolder, in a dedicated
imagesfolder. Now I'll import them in the
And now let's finalize the carousel code:
The image URL, alt text, and name are now passed as props.
A few words on the settings of the carousel:
infinite are set to
true, which just means that the dots are displayed under the carousel, and the images are displayed in an infinite loop. The
slidesToShow property determines how many images the user sees in one frame, and the
slidesToScroll determines how many images you can scroll at once.
speed property defines the animation speed in milliseconds and the
className adds the styling for the slides.
If, for example, you want the slider to be displayed vertically instead of horizontally, you can easily do this by adding the
vertical property and setting it to
I'll adjust the styling of the carousel a bit, to center the pictures and titles. Here's the updated code:
Your carousel with React-slick should look like this:
If you want to display a single picture at once, change the
slidesToShow value to 1 instead of 2.
Also, to display arrows as we did in the previous carousel, you'll need to do some adjustments to the CSS. So in the
styles.cssfile, adjust the code as follows:
Now you'll have a carousel that looks more like the previous one. You can find the project sandbox here.
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.