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
Top comments (5)
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
+1, can I also help beta 3.0? :)
The carousel is awesome, but it`s a bit buggy in Firefox. If it has linked items the carousel can not be scrolled.
How to use animation in sliding? I am unable to do that? Is anyone here to help me
Love this library! I tried about 5 for React before but there were bugs with infinity loading but this worked like a charm! <3