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

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:

1. Server-side rendering
2. Infinite mode
3. Dot mode
4. Custom animation
5. AutoPlay mode
6. Auto play interval
7. Supports images, videos, everything.
8. Responsive
9. Swipe to slide
10. Mouse drag to slide
11. Keyboard control to slide
12. Multiple items
13. Show / hide arrows
14. Custom arrows / control buttons
15. Custom dots
16. Custom styling
17. Accessibility support
18. Center mode.
19. 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

Comments

[JZinkl]

hey man, is there a way to test-drive the version 3.0 already? I'm really looking for a lightweight, modern carousel working with next.js

[Dan Davis]

+1, can I also help beta 3.0? :)

[onair_Lena]

The carousel is awesome, but it`s a bit buggy in Firefox. If it has linked items the carousel can not be scrolled.

[muradtheOZ]

How to use animation in sliding? I am unable to do that? Is anyone here to help me

[Samesh]

Love this library! I tried about 5 for React before but there were bugs with infinity loading but this worked like a charm! <3