Build a React Carousel from Scratch - Tutorial Without External Libraries
In this tutorial, we will build a React carousel from scratch without using any external library. We will therefore have to devise ways to process touch swipes and mouse drags in addition to dealing with clicks and keyboard input.
After setting up our environment, we will lay out our component, style it, handle input and state, and animate it. We first handle clicks, then add transitions before handling keyboard input. Afterward, we will add indicators to know where in the carousel we are. Later, we’ll move to handle touch swipes and mouse drags. The handling here will be responsive and finger following! In the end, we will add a timer so that slides would advance on their own. To achieve a clean timer, we will make use of the component’s lifecycle with useEffect. That’s not all, we will conclude this tutorial by handling an edge chase where we have one child in the carousel. We will be using the core front-end technologies: JavaScript and CSS.
I tried to keep the code as simple and understandable as possible. I will make another video where I will show the code in a refactored way soon.
0:00 Introduction and project/component setup
6:51 Carousel layout and styling
18:56 Displaying and styling children of the component
29:07 Navigating with buttons
41:33 Bouncing back from the end (infinite prop)
44:00 Keyboard navigation
54:46 Removing scrollbar from Firefox
55:05 Adding clickable slide indicators
1:05:35 Enabling touch swiping
1:23:31 Making the swipe transition responsive
1:31:45 Enabling mouse dragging
1:43:54 Advancing on a timer
1:51:45 Stopping the timer after manual input
1:55:31 Ironing the timer – preventing advancing in the mid-swipe
1:59:05 Handling the edge case of having one child
You can find the code on
https://github.com/judabne/carousel-t...
If you are not familiar with Git and you prefer to download specific stages of the code, use the links below, click on “code”, and then click on “Download ZIP”:
Project setup and carousel layout: https://github.com/judabne/carousel-t...
Displaying children: https://github.com/judabne/carousel-t...
Button navigation: https://github.com/judabne/carousel-t...
Infinite prop: https://github.com/judabne/carousel-t...
Keyboard controls: https://github.com/judabne/carousel-t...
Slide indicators: https://github.com/judabne/carousel-t...
Touch swipes: https://github.com/judabne/carousel-t...
Mouse swipes: https://github.com/judabne/carousel-t...