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-reactCode 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