🌟 New features:

• #230 - Plugin system

New plugins:

• Autoplay

Deprecated options:

• selectedClass
• draggableClass
• draggingClass

Default option values that have changed:

• skipSnaps: true --> false

Renamed methods:

• dangerouslyGetEngine --> internalEngine

Browser support changes:

• Dropping IE11 support. You can easily add it back by following this step in the docs.

New internal behaviour: (postponed to later release)

• The transform unit will change from % to px. A side effect of this will be that the position: relative needed for loop carousels won't be necessary anymore.

Donations

Embla Carousel is an open source MIT licensed project. If you are interested in supporting this project, please consider:

• One-off donation via PayPal
• One-off/monthly donations via Ko-fi

Added the missing nodeAuthToken to the .yarnrc file.

Note! This major release comes with breaking changes for React users only ⚛️!

✅ The new, correct way to use Embla with React from v5.0.0 and up:

import useEmblaCarousel from 'embla-carousel-react'

❌ This won't work anymore:

import { useEmblaCarousel } from 'embla-carousel/react'

🌟 Improvements

• Migration from Yarn 1 --> Yarn 2 comes with a lot of great monorepo improvements.
• The react version of Embla Carousel is now its own dedicated package.

🛠️ Bugfixes

This patch release fixes the broken type declarations for the useEmblaCarousel hook that was introduced in v4.5.2.

🌟 Improvements

Solves issue #181 to some extent.

🌟 New Features

Solves issue #38. With this release, it's possible to turn off the behavior where the carousel skips scroll snaps when it's dragged vigorously. This will be an opt-in option for now, but with the next major release (v.5), this will be the default behavior.

Read more here.

🌟 New Features

Solves issue #176. With this release, it's possible to scroll instantly to a scroll snap with the jump parameter. It's a boolean and default is false. The following methods accept the jump parameter:

• scrollTo
• scrollNext
• scrollPrev

Usage

embla.scrollTo(3) // Smooth scroll to scroll snap index 3
embla.scrollTo(3, true) // Instant jump to scroll snap index 3

embla.scrollPrev()  // Smooth scroll to the previous scroll snap
embla.scrollPrev(true)  // Instant jump to the previous scroll snap

embla.scrollNext()  // Smooth scroll to the next scroll snap
embla.scrollNext(true)  // Instant jump to the next scroll snap

Bundle size

This feature doesn't add anything to the bundle size.

Enjoy!

🛠️ Bugfixes

Solves issue #170.

🛠️ Bugfixes

Solves issue #164.

🌟 New Features

Solves issue #156. With this release, it's possible to declare different options for different breakpoints. It's achieved by using the content attribute of the pseudo element :before on the root node:

.embla:before {
  display: none;
  content: '{
    "slidesToScroll": 1,
    "draggable": true
  }';
}
@media (min-width: 768px) {
  .embla:before {
    content: '{
      "slidesToScroll": 2,
      "draggable": false
    }';
  }
}

Enjoy!

Removes the transform rounding in the Translate component.

🌟 New Features

This is definitely one of the most exciting releases in a while. This release ships with awesome new features:

Auto Spacing Detection

Embla will automatically detect any spacings between the slides whether it's margins or grid gaps, and automagically align the scroll snaps accordingly. This gives users a whole new level of freedom and convenience when setting up their carousels. This marks the beginning of Embla Carousel fully supporting any CSS that aligns your slides horizontally or vertically, whether it's CSS Grid, Flexbox or any other setup. This is more to the spirit of Embla Carousel which aims to have a minimal footprint.

Usage

For example, add spacing between your slides like so:

.embla__slide {
  margin-right: 20px;
}

...or like so:

.embla__container {
  grid-column-gap: 20px;
}

Root Node Method

Before this release, Embla exposed its container node and slide nodes with the embla.containerNode() and embla.slideNodes() methods. This release also exposes the rootNode with the following method embla.rootNode().

Usage

The root node is equivalent to the first argument you pass to the EmblaCarousel(rootNode: HTMLElement, option: EmblaOptions) initalizer. It's been added for convenience, in case you need to access that node in any context where you have access to the embla instance.

const embla = EmblaCarousel(emblaNode /* <--- this is equivalent to... */, options)
const rootNode = embla.rootNode() /* <--- ...this node */

🛠️ Bugfixes

• #151

Last but not least

This release makes the total bundle size 6% smaller 🎉 😍.

Enjoy!
David

🌟 Improvements

README links now point directly to useful documentation pages. For example Installation --> Takes you to https://www.embla-carousel.com/get-started/#choose-installation-type.

🌟 New documentation website

The new documentation website is up. Check it out here https://www.embla-carousel.com.

🌟 Improvements

This release comes with a refactored eventEmitter component that slightly reduces the bundle size.

🌟 Improvements

• The ScrollBounds component is now responsible for applying friction instead of the dragHandler component when the carousel is out of bounds.

🌟 New Features

This release comes with RTL (Right To Left) support (#43) for Embla. Special thanks to @omarkhatibco and @ppromerojr for all the help. And good news! This feature doesn't add any weight to the Embla library. It actually comes with a slightly reduced bundle size.

Usage

The options object is configured like so:

const emblaNode = document.getElementById('embla')
const options = { direction: 'rtl' } // Default is 'ltr'

const embla = EmblaCarousel(emblaNode, options)

The HTML direction also has to be set to RTL. This can be achieved by using the HTML dir attribute:

<div class="embla" id="embla" dir="rtl">
  ...
</div>

...or using the CSS direction property:

.embla {
  direction: rtl;
}

CodeSandboxes

I've added the following two sandboxes to the examples page to get you started:

• Vanilla JS
• React JS

Enjoy!