Embla Carousel

Lightweight, headless, touch-first carousels.

Docs

Live demoembla

Headless

Zero DOM styles — you own every pixel.

Touch-first

Drag, momentum, snap — native-feeling.

Plugins

Autoplay, Fade, WheelGestures, ClassNames.

Framework-agnostic

Vanilla, React, Vue, Svelte, Solid.

Drag or use arrows — autoplays every 3.5s

Embla has replaced Swiper as the default carousel in most modern stacks — tiny, headless, and pluggable. Autoplay, fade, class-names, wheel-gestures all ship as tree-shakable plugins.

Install

npm i embla-carousel-react

Snippet

import useEmblaCarousel from "embla-carousel-react";
import Autoplay from "embla-carousel-autoplay";

const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [
  Autoplay({ delay: 3500 }),
]);

<div ref={emblaRef} className="overflow-hidden">
  <div className="flex">
    {slides.map((s) => (
      <div key={s} className="min-w-0 flex-[0_0_75%] pl-4">...</div>
    ))}
  </div>
</div>