DEV Community

Cover image for How to Handle Swipe Event on React Carousel
Demaspira Aulia
Demaspira Aulia

Posted on • Updated on • Originally published at

How to Handle Swipe Event on React Carousel

Previously we've created a Simple Carousel on React with a simple button to navigate to previous and next slide.

Now we will add a simple swipe event for touchscreen devices, this is particularly handy for mobile devices like smartphone to make it easier to navigate with 1 finger.


Check my part 1 of this series to follow a step by step guide to make a simple react carousel, or you can pull directly from my github repo.

Handle Swipe Event

In Javascript you can add a swipe event handler using onTouchStart, onTouchMove, and onTouchEnd listener, we will only be using onTouchStart and onTouchMove for now.


onTouchStart is an event listener that will trigger a touchstart event. In this application we will use onTouchStart to record where the user first touch the screen, this value will be used to measure if the user is just tapping the screen or actually want to initiate a swipe motion.

Carousel.js - add handler for onTouchStart

// ...
const [touchPosition, setTouchPosition] = useState(null)
// ...
const handleTouchStart = (e) => {
    const touchDown = e.touches[0].clientX
Enter fullscreen mode Exit fullscreen mode

Carousel.js - bind handleTouchStart to onTouchStart listener

- <div className="carousel-content-wrapper">
+ <div
+    className="carousel-content-wrapper"
+    onTouchStart={handleTouchStart}
+ >
Enter fullscreen mode Exit fullscreen mode

Now every time the user touch the screen inside the Carousel Content Wrapper it will save the position to touchPosition state.


onTouchMove is an event listener that will trigger a touchmove event every time the user move their finger on the screen, it continuously check for current position of user's finger.

So what is the point for using this event listener you might say? By knowing the initial position of the user's finger and current position of user's finger we can measure the movement speed of user's finger, then we can determine if the user is currently swiping or not, and which direction of the swipe it is.

To determine the direction of the swipe, we will need a minimum speed of the finger's movement. In my experience, 5 and -5 suits my application best (negative value means the user swipe to the right), you may need to change the value around to suit your application best.

Carousel.js - add handler for onTouchMove

// ...
const handleTouchMove = (e) => {
    const touchDown = touchPosition

    if(touchDown === null) {

    const currentTouch = e.touches[0].clientX
    const diff = touchDown - currentTouch

    if (diff > 5) {

    if (diff < -5) {

// ...
Enter fullscreen mode Exit fullscreen mode

Carousel.js - bind handleTouchMove to onTouchMove listener

+    onTouchMove={handleTouchMove}
Enter fullscreen mode Exit fullscreen mode

And we are done!


We've added swipe listener to handle navigating to previous and next slide. One more step that you might want to do is hide the control button on touchscreen devices, there are use cases where we still want to display the button, that's why add this as and extra step.

Hide Control Button on Touchscreen Device

To detect if the device utilize touchscreen or not using only css, you can read this article by ferie that explains the css selector that able to detect touchscreen and pointer.

We basically want to add display: none; to .left-arrow and .right-arrow class.


/* ... */
@media (hover: none) and (pointer: coarse) {
    .left-arrow, .right-arrow {
        display: none;
/* ... */
Enter fullscreen mode Exit fullscreen mode

And that's it!
You can check the final full code on my Github.

If you have any suggestions on how to handle swipe event better, you can tell me down on the comments! I would love to hear your ideas.

The next post will be about showing multiple item at once in the Carousel.

Top comments (6)

lursmani profile image

Hey there! Very cool guide, did a version of it myself where the slides transition at the end of the swipe, not during.

I have a question: Would you have an idea on how to make this slide follow your finger and then snap to the next picture that is in view? Like the instagram carousel, for example.

The finger-following is easy, I just changed .carousel-content-wrapper's overflow property to "scroll" from "hidden", but now the slide transitions the distance that you swipe + the original distance. Is there a way to make it that the total distance transitioned is equal to one picture, no matter how far you swipe?

ahamsammich profile image
Andre Hammons

Your article was a big help! Thank you!

eagledev_ profile image
Eagle Dev • Edited

Very helpful article, this is what I was looking for! ✨❣️

kevin820125 profile image

I have to say, your complete Carousel guide is very clear and smart. Thank you!

giltorch profile image

Excellent tutorial. I just love how you keep improving it

tarundoit07 profile image

how to make it responsive,
I applied it and made card but it is collapsing in small screen.