EM

Embla Carousel React

embla-carousel-react

A lightweight carousel library with fluid motion and great swipe precision

Utilities
slider
carousel
slideshow
gallery
lightweight
touch
javascript
typescript
react
vue
Stars
8.4k
Weekly
22M
Open issues
19
Bundle
~15 kB

Installation

npm install embla-carousel-react

Code example

import useEmblaCarousel from "embla-carousel-react";

export function Example() {
  const [ref] = useEmblaCarousel({ loop: true });
  return (
    <div ref={ref}>
      <div style={{ display: "flex" }}>
        <div style={{ flex: "0 0 100%" }}>Slide 1</div>
        <div style={{ flex: "0 0 100%" }}>Slide 2</div>
      </div>
    </div>
  );
}

Pros & cons

Pros

  • Actively maintained by David Jerleke
  • 22M weekly downloads. Battle tested
  • First-class TypeScript definitions
  • MIT licensed

Considerations

  • Adds roughly ~15 kB to your bundle
  • Needs client-only rendering in SSR frameworks
  • Not supported in React Native
  • 19 open issues on GitHub

FAQs

Alternatives & similar libraries