Skip to content

Releases: davidjerleke/embla-carousel

v8.0.0-rc09

08 Jul 19:34
@davidjerleke davidjerleke
v8.0.0-rc09
779ea1f
Compare
Choose a tag to compare
v8.0.0-rc09 Pre-release
Pre-release

🚨 Note!

💥 Changes:

🛠️ Bugfixes:

Donations

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

What's Changed

Full Changelog: v8.0.0-rc08...v8.0.0-rc09

Contributors

davidjerleke, MaxDesignFR, and hamidrezahanafi
Assets 2
Loading

v8.0.0-rc08

07 Jul 20:15
@davidjerleke davidjerleke
v8.0.0-rc08
bf2fce7
Compare
Choose a tag to compare
v8.0.0-rc08 Pre-release
Pre-release

🚨 Note!

🛠️ Bugfixes:

Donations

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

What's Changed

New Contributors

Full Changelog: v8.0.0-rc07...v8.0.0-rc08

Contributors

dlhagstroem, davidjerleke, and dependabot
Assets 2
Loading

v8.0.0-rc07

06 Jun 10:48
@davidjerleke davidjerleke
v8.0.0-rc07
265b417
Compare
Choose a tag to compare
v8.0.0-rc07 Pre-release
Pre-release

🚨 Note!

🛠️ Bugfixes:

Donations

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

What's Changed

Full Changelog: v8.0.0-rc06...v8.0.0-rc07

Contributors

davidjerleke, tobimori, and 2 other contributors
Assets 2
Loading

v8.0.0-rc06

31 May 10:15
@davidjerleke davidjerleke
v8.0.0-rc06
29ffaa8
Compare
Choose a tag to compare
v8.0.0-rc06 Pre-release
Pre-release

🚨 Note!

🛠️ Bugfixes:

  • #486 - Carousel isn't reactivating after resizing from a breakpoint with active: false. Thanks @turtlecrab!

Donations

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

What's Changed

Full Changelog: v8.0.0-rc05...v8.0.0-rc06

Contributors

davidjerleke and turtlecrab
Assets 2
Loading

v8.0.0-rc05

24 May 11:55
@davidjerleke davidjerleke
v8.0.0-rc05
e8fe232
Compare
Choose a tag to compare
v8.0.0-rc05 Pre-release
Pre-release

🚨 Note!

🛠️ Bugfixes:

  • #472 - Too many Snaps on Firefox with containScroll: 'trimSnaps'. Thanks @mUzzzie.

Donations

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

What's Changed

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

Contributors

davidjerleke and mUzzzie
Assets 2
Loading

v8.0.0-rc04

20 May 18:45
@davidjerleke davidjerleke
v8.0.0-rc04
d67b207
Compare
Choose a tag to compare
v8.0.0-rc04 Pre-release
Pre-release

🚨 Note!

🌟 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:

What's Changed

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

Contributors

davidjerleke, M-Joyce, and slpy9
Assets 2
Loading

v8.0.0-rc03

03 May 10:54
@davidjerleke davidjerleke
v8.0.0-rc03
21bfb2e
Compare
Choose a tag to compare
v8.0.0-rc03 Pre-release
Pre-release

🚨 Note!

🌟 New features:

Donations

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

What's Changed

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

Contributors

davidjerleke
Assets 2
Loading

v8.0.0-rc02

28 Apr 11:05
@davidjerleke davidjerleke
v8.0.0-rc02
3a3ecd1
Compare
Choose a tag to compare
v8.0.0-rc02 Pre-release
Pre-release

🚨 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:

What's Changed

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

Contributors

davidjerleke
Assets 2
Loading

v8.0.0-rc01

25 Apr 20:15
@davidjerleke davidjerleke
v8.0.0-rc01
d725df6
Compare
Choose a tag to compare
v8.0.0-rc01 Pre-release
Pre-release

🚨 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:

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:

What's Changed

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

Contributors

macjuul, silllli, and 3 other contributors
Assets 2
Loading

v7.1.0

08 Mar 19:52
@davidjerleke davidjerleke
v7.1.0
a3489a6
Compare
Choose a tag to compare
v7.1.0

🌟 New features:

Donations

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

What's Changed

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

Contributors

davidjerleke
Assets 2
Loading