🚨 Note!

• Any plugins you intend to use with this version also has to be v7.0.0-rc03.
• ⭐ v7 feature specification - Click here

🛠️ Bugfixes

• [x] #332 Stale plugin options

---

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

---

Full Changelog: https://github.com/davidjerleke/embla-carousel/compare/v7.0.0-rc01...v7.0.0-rc03

🚨 Note!

• Any plugins you intend to use with this version also has to be v7.0.0-rc01.

🌟 New features:

• [x] #322 - Breakpoints option
• [x] #327 - Expose plugin API:s from the Embla API
• [x] #329 - Active option
• [x] #330 - New option value: slidesToScroll: auto
• [x] #305 - React 18 Support

➡️ Changes

• [x] #331 - containScroll: Account for edge spacing
• [x] #60 - The transform unit has changed from % to px. As a result, the position: relative style on the slides needed for loop carousels to work is not necessary anymore.

🛠️ Bugfixes

• [x] #285 - Non-visible slides when using CSS grid in combination with loop: true
• [x] #317 - Embla + Framer Motion + Flubber makes slides "disappear"

💥 Breaking Changes

• [x] #327 - Expose plugin API:s from the Embla API

❌ Features removed

• [x] Pseudo options

---

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

🌟 New features:

Adds the ability to set global options. Solves #175.

---

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

🌟 New features:

Adds the playOnInit option to the embla-carousel-autoplay plugin.

🛠️ Bugfixes

• #271
• #272

---

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

🌟 New features:

Adds the Auto Height plugin to NPM. Solves #113.

• Plugin page

---

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

🌟 New features:

Adds the Class Names plugin to NPM. Solves #239.

• Plugin page

---

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

🛠️ Bugfixes

• #238

---

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

🌟 New features:

• [x] #230 - Plugin system

New plugins:

• [x] Autoplay

Deprecated options:

• [x] selectedClass
• [x] draggableClass
• [x] draggingClass

Default option values that have changed:

• [x] skipSnaps: true --> false

Renamed methods:

• [x] dangerouslyGetEngine --> internalEngine

Browser support changes:

• [x] 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.

<img width="700" alt="v4 4 0" src="https://user-images.githubusercontent.com/11529148/114317052-8c3f4d80-9b06-11eb-8ee3-c1d5533bc3bf.png">

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!

🛠️ Bugfixes

• Fixes the issue described in PR #108. Special thanks to @msallent for his efforts!

🛠️ Bugfixes

Comes with fixes for:

• Issue #87. Special thanks to @S1SYPHOS for reporting this.
• Issue #102. Special thanks to @huttameps for reporting this.

🛠️ Bugfixes

• Comes with a fix for issue #99. Special thanks to @flayks for reporting this.

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

Massive thanks to Felix (@xiel) for his contributions to this release 🙏!

🌟 Improvements

• Instead of exposing an encapsulated component <EmblaCarouselReact>, the useEmblaCarousel() hook now exposes a ref you can attach to your own component. The ref approach makes the Embla footprint smaller regarding forcing stuff on the user. Basically, what the <EmblaCarouselReact> component did was creating a React Element with the style { overflow: "hidden" }. As a consequence, the user had to pass a string to choose DOM element type (div, ul, section etc...) and had to use the className prop in order to style the encapsulated element. This release solves issue #94.
• Embla Carousel didn't initialize correctly if the component that used <EmblaCarouselReact> returned null before initializing the carousel. This release solves issue #91.
• The options parameter passed to the useEmblaCarousel({ loop: false }) was before this release a one way ticket. Changing options didn't reinitialize the carousel with the new options. This has been fixed in this release.

Migration

Migrating is luckily very easy.

❌ Deprecated way to do it

import React, { useEffect } from 'react'
import { useEmblaCarousel } from 'embla-carousel/react'

const EmblaCarousel = () => {
  const [EmblaCarouselReact, emblaApi] = useEmblaCarousel({ loop: false })

  return (
    <EmblaCarouselReact>
      <div className="embla__container">
        <div className="embla__slide">Slide 1</div>
        <div className="embla__slide">Slide 2</div>
        <div className="embla__slide">Slide 3</div>
      </div>
    </EmblaCarouselReact>
  )
}

export default EmblaCarousel

✅ New way to do it

import React, { useEffect } from 'react'
import { useEmblaCarousel } from 'embla-carousel/react'

const EmblaCarousel = () => {
  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false })

  return (
    <div className="embla" ref={emblaRef}> /* Make sure this element has overflow: hidden; */
      <div className="embla__container">
        <div className="embla__slide">Slide 1</div>
        <div className="embla__slide">Slide 2</div>
        <div className="embla__slide">Slide 3</div>
      </div>
    </div>
  )
}

export default EmblaCarousel

Enjoy!

• Resolves issue #84 with PR #93 which removed side effects from the react package. Special thanks to @wopian for his efforts.
• The Embla Carousel package is now marked with "sideEffects": false in package.json.

• A fix for the window bind issue has been merged #85. Special thanks to @romellem for this.
• The drag handler now respects event.cancelable and bails if it returns false.

This release resolves issue #82. Special thanks to @sedlukha.

🌟 Improvements

• Small code improvements that resulted in a smaller bundle size.

🛠️ Bugfixes

• When an empty carousel with no slides was initialized, canScrollNext() and canScrollPrev() returned true when loop: true. This has been resolved.
• Comes with a fix for issue #81. Special thanks to @misshu1 for reporting this.

🌟 Improvements

This release resolves issue #78. Special thanks to @korsvanloon for opening this issue.

🛠️ Bugfixes

This release resolves issue #77. Special thanks to @jamesdbruner for noticing this.

🛠️ Bugfixes

This release resolves issue #75. Special thanks to @korsvanloon for opening this issue.

🌟 New Features

The embla-carousel-react has now moved into the core package which will improve the maintainability of this project. For example, as soon as a new version is released, React users won't have to wait for the React package to be published separately.

How to migrate from the React package

Please migrate as soon as possible. Start by uninstalling the react package and installing the core package like so:

NPM

npm uninstall embla-carousel-react --save

npm install embla-carousel --save

YARN

yarn remove embla-carousel-react --save

yarn add embla-carousel --save

Change your import

// from this...
import { useEmblaCarousel } from 'embla-carousel-react';

// ...to this
import { useEmblaCarousel } from 'embla-carousel/react';

IMPORTANT Notes!

• To anyone NOT using the useEmblaCarousel() hook. The class setup is no longer supported. Please migrate to the hook setup as soon as possible.
• David here from the future! Some things have changed with the React implementation since this release. Make sure to read the release notes for version 4.0.0 on how to use Embla Carousel with React, if you're using version 4.0.0 and up.

I would very much appreciate

If you've starred the Embla Carousel React package, please take a moment to migrate your star ⭐ to the core package as well. I would appreciate that a lot.

Thank you! David