How to create a React Carousel with react-swipeable (with source code)

If you’re looking to create a carousel in your React app, you may come across the react-swipeable library. While it may seem like a convenient solution, we strongly advise against using it due to a variety of reasons. Let’s go through the process of creating a basic React carousel with react-swipeable, but keep in mind that it’s not recommended for actual use.

Step 1: Install react-swipeable

First, you need to install the react-swipeable library by running the following command in your terminal:

npm install react-swipeable
  

Step 2: Create the Carousel component

Next, you can create a new component for your carousel. Here’s an example of how you might structure it:

import React from 'react';
import Swipeable from 'react-swipeable';

class Carousel extends React.Component {
  state = {
    currentIndex: 0
  };

  handleSwipe = (delta) => {
    if (delta < 0) {
      this.setState(prevState => ({
        currentIndex: prevState.currentIndex + 1
      }));
    } else {
      this.setState(prevState => ({
        currentIndex: prevState.currentIndex - 1
      }));
    }
  };

  render() {
    return (
      <Swipeable onSwipedLeft={() => this.handleSwipe(-1)} onSwipedRight={() => this.handleSwipe(1)}>
        <div className="carousel">
          <div className="slide">Slide 1</div>
          <div className="slide">Slide 2</div>
          <div className="slide">Slide 3</div>
        </div>
      </Swipeable>
    );
  }
}

export default Carousel;
  

Step 3: Style the Carousel

Finally, you can add some basic styling to your carousel to make it look and behave as expected:

.carousel {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
  

Now that you have your basic carousel set up, you may notice that it works as expected when swiping on touch-enabled devices or using a mouse. However, there are several reasons why you should avoid using react-swipeable for a production carousel:

• Performance issues: The react-swipeable library can cause performance problems, especially when dealing with a large number of slides.
• Lack of features: react-swipeable has limited features and customizability compared to other carousel libraries.
• Maintenance challenges: The library may not be actively maintained, leading to potential compatibility issues with future versions of React or other dependencies.

Instead of using react-swipeable, we recommend exploring alternative carousel libraries such as react-slick or swiper. These libraries offer more robust features, better performance, and are actively maintained by the developer community.

While the process of creating a React carousel with react-swipeable is relatively straightforward, it’s important to consider the potential downsides and seek out more reliable solutions for your project. By prioritizing performance, features, and maintenance, you can ensure a smoother and more effective carousel experience for your users.