Carousel

Basic Structure

Every carousel needs .embla, .embla-viewport, .embla-container, and .embla-slide.

.embla

Slide 1

Slide 2

Slide 3

Slide 4

<div class="embla">
  <div class="embla-viewport">
    <div class="embla-container">
      <div class="embla-slide">...</div>
      <div class="embla-slide">...</div>
      <div class="embla-slide">...</div>
    </div>
  </div>
</div>

Columns

Control how many slides are visible with .embla-cols-{1-6}. Responsive variants available.

.embla-cols-3

// fixed columns
<div class="embla embla-cols-3">...</div>

// responsive columns
<div class="embla embla-cols-1 embla-cols-md-2 embla-cols-lg-4">...</div>

// available: embla-cols-{sm|md|lg|xl|xxl}-{1-6}

Peek & Spacing

By default, 15% of the next slide peeks. Override with CSS variables.

.embla-no-peek --embla-slide-spacing

// no peek (slides fill exactly)
<div class="embla embla-no-peek">...</div>

// custom spacing via CSS variable
<div class="embla" style="--embla-slide-spacing: 2rem">...</div>

// custom peek amount
<div class="embla" style="--embla-slide-peek: 25%">...</div>

.embla-g-{0-5} Spacing scale

Gap helpers mirroring Bootstrap's $spacers map. Sets --embla-slide-spacing.

Class Value .embla-g-0 0 .embla-g-1 0.25rem .embla-g-2 0.5rem .embla-g-3 1rem (default) .embla-g-4 1.5rem .embla-g-5 3rem

// no gap between slides
<div class="embla embla-g-0">...</div>

// large gap
<div class="embla embla-g-5">...</div>

Navigation

Prev/next buttons and dot indicators. Auto-disabled at scroll boundaries.

.embla-prev .embla-next .embla-dots

<div class="embla">
  <div class="embla-viewport">
    <div class="embla-container">...</div>
  </div>

  <div class="embla-controls">
    <div class="embla-buttons">
      <button class="embla-button embla-prev" type="button">
        <svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
      </button>
      <button class="embla-button embla-next" type="button">
        <svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
      </button>
    </div>
    <div class="embla-dots"></div>
  </div>
</div>

data-nav External navigation scope

By default, navigation buttons and dots are searched inside the .embla element.

Use data-nav="#my-controls" to place controls elsewhere in the DOM.

<div class="embla" data-nav="#carousel-nav">
  <div class="embla-viewport">...</div>
</div>

<div id="carousel-nav">
  <button class="embla-button embla-prev">...</button>
  <button class="embla-button embla-next">...</button>
  <div class="embla-dots"></div>
</div>

Options

All options are set via data-* attributes on the .embla element.

Core options

Attribute Default Description data-loop false Infinite loop scrolling data-align start Slide alignment: start, center, end data-skip-snaps false Allow skipping snaps on drag data-drag-free false Free-form dragging (momentum scroll) data-contain-scroll trimSnaps Scroll containment behavior

<div class="embla" data-loop="true" data-align="center">...</div>

<div class="embla" data-drag-free="true">...</div>

data-loop="true"

<div class="embla" data-loop="true">...</div>

Autoplay & Auto Scroll

Two plugins: autoplay (slide by slide) and autoscroll (continuous movement).

Autoplay options

Attribute Default Description data-autoplay false Enable autoplay plugin data-autoplay-delay 4000 Delay between slides (ms) data-stop-on-interaction true Stop on user interaction data-stop-on-mouse-enter false Pause on hover

<div class="embla" data-autoplay="true">...</div>

// faster, pause on hover
<div class="embla" data-autoplay="true" data-autoplay-delay="2000" data-stop-on-mouse-enter="true">...</div>

Auto Scroll options

Attribute Default Description data-autoscroll false Enable continuous scroll data-autoscroll-speed 1 Scroll speed multiplier data-autoscroll-direction forward Scroll direction: forward (left) or backward (right) data-stop-on-interaction true Stop on user interaction data-stop-on-mouse-enter false Pause on hover

// continuous ticker-style scroll
<div class="embla" data-autoscroll="true" data-loop="true">...</div>

// slower, pause on hover
<div class="embla" data-autoscroll="true" data-autoscroll-speed="0.5" data-stop-on-mouse-enter="true">...</div>

// scroll to the right
<div class="embla" data-autoscroll="true" data-autoscroll-direction="backward" data-loop="true">...</div>

data-autoplay="true" Live demo

<div class="embla embla-cols-3" data-autoplay="true" data-loop="true" data-stop-on-mouse-enter="true">
  ...
</div>

Height & Width

Control slide dimensions with utility classes.

Height & width classes

Class Effect .embla-h-sm Slide height: 150px .embla-h-md Slide height: 250px .embla-h-lg Slide height: 350px .embla-h-xl Slide height: 450px .embla-auto-height Height adapts to content (min-height from above) .embla-auto-width Slides size to their content width

<div class="embla embla-h-lg">...</div>

// auto-width: each slide takes its natural width
<div class="embla embla-auto-width">
  <div class="embla-slide">Short</div>
  <div class="embla-slide">A much longer slide</div>
</div>

Responsive Disable

Disable the carousel at a breakpoint and switch to a CSS grid layout.

.embla-{breakpoint}-disable

// carousel on mobile, grid on md+
<div class="embla embla-cols-1 embla-cols-md-3 embla-md-disable">...</div>

// carousel on mobile/tablet, grid on lg+
<div class="embla embla-cols-lg-4 embla-lg-disable">...</div>

// available: embla-{sm|md|lg|xl|xxl}-disable
// buttons and dots auto-hide when disabled

CSS Variables

All styling is driven by CSS custom properties on .embla.

Available variables

Variable Default Description --embla-slide-spacing 1rem Gap between slides --embla-slide-peek 15% How much of the next slide peeks --embla-cols 1 Number of visible columns (set by classes) --embla-slide-height — Fixed slide height (set by .embla-h-* classes)

// override via inline style
<div class="embla" style="--embla-slide-spacing: 2rem; --embla-slide-peek: 10%">...</div>

On this page