Embla Carousel — Lightweight Carousel Library with Fluid Motion

Introduction

Embla Carousel is a lightweight, dependency-free carousel engine designed around natural scroll physics and precise swipe handling. The core library is framework-agnostic, with official wrapper packages for React, Vue, Svelte, and Solid. It uses CSS flexbox for layout and provides a plugin system for autoplay, class names, and other behaviors.

What Embla Carousel Does

• Creates horizontal and vertical carousels with smooth scroll physics
• Handles touch, mouse, and trackpad swipe gestures with configurable friction
• Supports loop, fade, and variable-width slide configurations
• Provides a plugin API for autoplay, class names, wheel gestures, and auto-height
• Exposes a programmatic API for navigating, observing, and controlling the carousel

Architecture Overview

The core engine calculates slide positions and manages scroll animation using requestAnimationFrame. It reads CSS flexbox layout measurements to determine slide widths and gaps, then translates the container element along the scroll axis. Swipe velocity is tracked to produce momentum-based scrolling that feels natural. The plugin system hooks into lifecycle events (init, select, settle, scroll) so extensions like autoplay can react to carousel state changes without modifying the core.

Installation & Configuration

• Install the framework wrapper: npm install embla-carousel-react (or -vue, -svelte, -solid)
• Pass the ref from the hook to a container element with overflow hidden
• Configure options like loop, axis, dragFree, and startIndex via the hook
• Add plugins by passing them as the second argument to the hook
• Use the emblaApi object to listen for events and control navigation

Key Features

• Zero dependencies with a core bundle under 3 KB gzipped
• Framework wrappers for React, Vue, Svelte, Solid, and vanilla JS
• Plugin system with official autoplay, class names, fade, auto-height, and wheel plugins
• Right-to-left (RTL) layout support
• Supports variable-width slides and multi-slide views without configuration

Comparison with Similar Tools

• Swiper — more built-in features (pagination, navigation) but significantly larger bundle
• Splide — similar feature set; slightly larger with more out-of-the-box UI components
• Keen Slider — comparable size and approach; smaller community
• Slick — jQuery-based; legacy choice not suited for modern React projects
• Flickity — mature library; no native React integration

FAQ

Q: How do I add autoplay? A: Install embla-carousel-autoplay and pass it as a plugin: useEmblaCarousel([Autoplay()]).

Q: Can I make slides different widths? A: Yes. Set each slide to its desired CSS width. Embla reads the actual rendered dimensions from the DOM.

Q: Does it support infinite looping? A: Yes. Set the loop option to true. The library clones slides internally to create a seamless wrap.

Q: How do I add previous/next buttons? A: Use the emblaApi.scrollPrev() and emblaApi.scrollNext() methods attached to button click handlers.

Sources

• https://github.com/davidjerleke/embla-carousel
• https://www.embla-carousel.com