Why you should use react-multi-carousel in your project?

yi — Thu, 23 Apr 2020 14:20:20 +0000

Hi folks,

Finding a good Carousel that is small in size, and have supports in SSR(server-side rendering) with infinite mode is hard, building one yourself from scratch is even harder especially if you are in tight deadline. These are the exact reasons why I built react-multi-carousel at the very first place. I was working as a Software consultant for a while, a few of the projects that I worked on in big companies that went live to production use the exact same Carousel component, as you know you gotta fulfill your clients' weird demands to make the carousel working in the exact same way they wanted in their dreams and that's not easy with the current Carousel components available in NPM.

Here are a list of the key features:

Server-side rendering
Infinite mode
Dot mode
Custom animation
AutoPlay mode
Auto play interval
Supports images, videos, everything.
Responsive
Swipe to slide
Mouse drag to slide
Keyboard control to slide
Multiple items
Show / hide arrows
Custom arrows / control buttons
Custom dots
Custom styling
Accessibility support
Center mode.
Show next/previous set of items partially

The infinite mode and allow sliding multiple items at once are the hardest parts of building this library, honestly it took me on and off a few months just to get these two working properly. The will be soon a blog post on how I made it. #caretoshare

I am currently working on the version 3.0 to rewrite this completely in hooks and context, that means the following APIs will be available soon:

ProductCard.jsx

const { isVisble, isActive } = props
const [next, previous, goToSlide, disable Animation, resetCarousel] = useCarousel().

The new APIs will allow further and yeah easier customization for supporting your business use cases.

Folks, please give it a try and it would mean a lot if you can consider giving financial support for my work in open collective

DEV Community: yi

Why you should use react-multi-carousel in your project?