How to create the responsive and swipeable Carousel — Slider component in React

Welcome back to my React series. Today I will show you how to build the Carousel, Slider, or Image Gallery component from scratch.

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

If you’re not familiar with the carousel, you can take a look at the Bootstrap Carousel as a reference here.

Here is the few steps we’re working today:

1. Understand the structure
2. Implement a simple carousel in React
3. Add some styling
4. Add the Carousel to the App
5. Configure the active item
6. Implement the indicators
7. Carousel/Slider with auto cycle
8. Pause/Resume the Carousel/Slider on mouse hover/mouse leave
9. A swipeable carousel on mobile devices

Now, let’s get started!!!

Step 1: Understand the structure