DEV Community

loading...

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

yizhuang profile image yi ・2 min read

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

Discussion

pic
Editor guide
Collapse
jannikzed profile image
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

Collapse
realw5 profile image
Dan Davis

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

Collapse
onairlena_13 profile image
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.

Collapse
samesh profile image
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