v8.0.0-rc04

🚨 Note!

• In addition to all changes in v8.0.0-rc01, v8.0.0-rc02 and v8.0.0-rc03, this release includes the following:

🌟 New features:

• #455 - Make carousel events work inside an iframe. Thanks a lot for the help @slpy9 🎉! @M-Joyce.

Embla now works in different realms like iframes and windows. Additionally, before this release, each carousel started a separate animation loop by calling requestAnimationFrame. With this release, all carousels within the same realm now share the same animation loop.

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

---

What's Changed

• Add support for multiple realms by @davidjerleke in #475

Full Changelog: v8.0.0-rc03...v8.0.0-rc04

v8.0.0-rc03

🚨 Note!

• In addition to all changes in v8.0.0-rc01 and v8.0.0-rc02, this release includes the following:

🌟 New features:

• #25 - Make dragThreshold configurable.
• Smoother animations

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

---

What's Changed

• Add dragThreshold option by @davidjerleke in #469

Full Changelog: v8.0.0-rc02...v8.0.0-rc03

v8.0.0-rc02

🚨 Note!

• This release only affects embla-carousel-svelte users.
• In addition to all changes in v8.0.0-rc01, this release includes the following:

🛠️ Bugfixes:

• #464 - Wrong embla-carousel-svelte init event types.

❌ Don't do this anymore:

<script lang="ts">
  import emblaCarouselSvelte, type { EmblaCarouselType } from 'embla-carousel-svelte'

  let emblaApi: EmblaCarouselType

  function onInit(event: CustomEvent<EmblaCarouselType>): void {
    emblaApi = event.detail
    console.log(emblaApi.slideNodes()) // Access API
  }
</script>

<div class="embla" use:emblaCarouselSvelte init="{onInit}"> ❌
  ...
</div>

✅ The new way to do it:

<script lang="ts">
  import emblaCarouselSvelte, type { EmblaCarouselType } from 'embla-carousel-svelte'

  let emblaApi: EmblaCarouselType

  function onInit(event: CustomEvent<EmblaCarouselType>): void {
    emblaApi = event.detail
    console.log(emblaApi.slideNodes()) // Access API
  }
</script>

<div class="embla" use:emblaCarouselSvelte emblaInit="{onInit}"> ✅
  ...
</div>

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

---

What's Changed

• Bugfix #464 by @davidjerleke in #465

Full Changelog: v8.0.0-rc01...v8.0.0-rc02

v8.0.0-rc01

🚨 Note!

• Embla dropped IE11 support in v.7.0.0 but it was only an Object.assign() polyfill away. With the v8.0.0 release, Embla uses modern browser features so if there are any devs out there that still need to support IE11, this version of Embla isn't for you.

👋 Introduction

Thanks to a generous anonymous donation, I was able to spend two and a half days on this project, instead of 15 minutes here and there of my worst time during a day. The result - All the following improvements without any increase in bundle size!

Thank you very much anonymous donator out there 💵❤️!

Please note that although this is a pre-release, the changes in this release are here to stay. However, I might choose to include a little more in the final v8.0.0 release.

🌟 New features:

A new physics engine

• #387 - Inconsistent animation speed depending on monitor refresh rate (thanks @macjuul)

Embla animations are now frame rate independent! No matter if your screen has a refresh rate of 30Hz, 60Hz, 120Hz or anything else, the animation durations will be the same.

I've replaced the old attraction physics model with a new more flexible one. The previous model was hard to reason with. In contrast, the new attraction model feels more natural. The speed of scrolling is now always proportional to how vigorous the drag gestures are.

The new watch concept

This release introduces the new watch concept. Devs now have three new options:

• #159 - Add watchResize and watchSlides options (thanks @ej-mitchell)
• #416 - Add watchDrag option (thanks @peacepostman)

watchResize

Embla is no longer listening to the window resize event. Instead, it's using ResizeObserver on its container and slides. If any size has changed it will re-initialize by calling reInit automatically. Default is:

{
  watchResize: true,
}

You can opt out of the default Embla resize behaviour like so:

{
  watchResize: false,
}

However, you can also pass a callback function to watchResize like so:

{
  watchResize: (emblaApi: EmblaCarouselType, entries: ResizeObserverEntry[]) => {
    // do your own thing here BEFORE Embla runs its internal resize logic

    return true // <-- Return true if you want Embla to continue with its default resize behaviour

    // ...OR:

    return false // <-- Return false if you want Embla to skip its default resize behaviour
  },
}

watchSlides

This new option adds the feature of Embla automatically re-initializing by calling reInit when slides have been added or removed, using MutationObserver. Default is:

{
  watchSlides: true,
}

You can opt out of the default Embla slides changed behaviour like so:

{
  watchSlides: false,
}

However, you can also pass a callback function to watchSlides like so:

{
  watchSlides: (emblaApi: EmblaCarouselType, mutations: MutationRecord[]) => {
    // do your own thing here BEFORE Embla runs its internal slides changed logic

    return true // <-- Return true if you want Embla to continue with its default slides changed behaviour

    // ...OR:

    return false // <-- Return false if you want Embla to skip its default slides changed behaviour
  },
}

watchDrag

This new option adds the possibility to cancel the default drag behaviour. For example, it's useful if you need to disable dragging when a user wants to scroll an element inside a slide. Default is:

{
  watchDrag: true,
}

You can opt out of the default Embla drag behaviour like so:

{
  watchDrag: false,
}

However, you can also pass a callback function to watchDrag like so:

{
  watchDrag: (emblaApi: EmblaCarouselType, event: MouseEvent | TouchEvent) => {
    // do your own thing here BEFORE Embla runs its internal drag logic

    return true // <-- Return true if you want Embla to continue with its default drag behaviour

    // ...OR:

    return false // <-- Return false if you want Embla to skip its default drag behaviour
  },
}

🛠️ Bugfixes

• #90 - Drag threshold is too high on wide screens (thanks @silllli for the help)
• #387 - Inconsistent animation speed depending on monitor refresh rate (thanks @macjuul)

💥 Breaking Changes

• #416 - Add watchDrag option (was named draggable before this release) (thanks @peacepostman)
• #462 - Add emblaApi as a first parameter to event listeners
• #387 - Inconsistent animation speed depending on monitor refresh rate (the previous speed option is now duration)
• The default value of containScroll options has changed from '' --> null.

❌ Features removed

• The clickAllowed() method has been removed because it's now handled automatically.

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

---

What's Changed

• Add watchResize and watchSlides options by @davidjerleke in #449
• Bugfix #387 by @davidjerleke in #459
• Bugfix #90 by @davidjerleke in #460
• Add watchDrag option by @davidjerleke in #461
• Add emblaApi as a first parameter to event listeners by @davidjerleke in #463

Full Changelog: v7.1.0...v8.0.0-rc01

v7.1.0

🌟 New features:

• #440 - Add slides & container 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

---

What's Changed

• Migrate to the latest Gatsby version by @davidjerleke in #428
• Docs improvements by @davidjerleke in #439
• Add slides & container options by @davidjerleke in #441

Full Changelog: v7.0.9...v7.1.0

v7.0.9

🛠️ Bugfixes:

• #424 - Dragging not working well in Firefox for desktop. @scheinercc.

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

---

What's Changed

• Dragging not working well in Firefox for desktop by @davidjerleke in #426

Full Changelog: v7.0.8...v7.0.9

v7.0.8

🌟 New features:

• #422 - Handle click prevention on drag automatically.

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

---

What's Changed

• Handle click prevention on drag automatically by @davidjerleke in #423

Full Changelog: v7.0.7...v7.0.8

v7.0.7

🌟 New features:

• #62 - Passive event listeners (no more Lighthouse errors 🎉!).

🛠️ Bugfixes:

• #394 - Interacting with a dropdown within the slider starts drag and drop behaviour.

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

---

What's Changed

• Passive event listeners by @davidjerleke in #421

Full Changelog: v7.0.6...v7.0.7

v7.0.6

🛠️ Bugfixes:

• #414 - When Embla falls back to loop: false it replaces the user provided loop option - Reported by @pReya.

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

---

What's Changed

• Generated CodeSanboxes by @davidjerleke in #403
• chore(docs): set custom root node for autoplay by @openscript in #406
• Bugfix #414 by @davidjerleke in #415

Full Changelog: v7.0.5...v7.0.6

v7.0.5

🚨 Note!

• If you have installed embla-carousel-react with the --legacy-peer-deps flag using React 16.8 or 17, you're encouraged to update your package to this version and re-install your dependencies without the --legacy-peer-deps flag.

🛠️ Bugfixes:

• #362 - Won't install on React 17.

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

---

What's Changed

• chore: Add React ^16.8 and ^17 to peer deps. by @horseeyephil in #392

New Contributors

• @horseeyephil made their first contribution in #392

Full Changelog: v7.0.4...v7.0.5