v8.0.0

✨ Release highlights

🌟 New core features

• Automatic slide/container size change detection with ResizeObserver.
• Automatic detection of added/removed slides with MutationObserver.
• Improved performance of slidesInView now using IntersectionObserver instead of custom calculations.
• New options to give devs more control: watchDrag, watchResize, watchSlides and dragThreshold.
• New events: slidesChanged and slidesInView.
• New Autoplay events: autoplay:play and autoplay:stop.
• Embla now works with elements that come from other realms, such as iframes.
• Support using tab on focusable elements to navigate the carousel.
• Calculations for element dimensions and snap positions now work even if these elements have applied transforms.
• Frame rate agnostic animations.
• Support for any media queries (not just width queries) in breakpoints option.
• New plugin: AutoScroll.
• And more...

🌟 New integrations/wrappers

• embla-carousel-solid - Thanks @LiamMartens!
• embla-carousel-angular - Thanks @donaldxdonald, @zip-fa and @JeanMeche!

🌟 Documentation

• A carousel generator (alpha).
• New/improved examples: SlidesPerView, AutoScroll, AutoHeight, Parallax, Opacity, Scale, IOS style picker.
• Examples have been added to plugin pages. For example, see AutoScroll.
• Reduced code noise in sandboxes.
• Code examples for Vanilla, React, Vue, Svelte, Solid and TypeScript usage have been added to all pages under the API section.

🌟 Misc

• Tests have been added, improved and refactored so they test the final product instead of isolated components.
• Improved issue/discussion setup with templates.
• Improved contribution guidelines - Thanks @zaaakher for all your efforts!
• A significant increase of contributions, both from current and new contributors.
• A significant increase of embla-carousel-svelte and embla-carousel-vue users.

🙏 A huge thank you to everyone who contributed to this release!

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
• Bugfix #464 by @davidjerleke in #465
• Add dragThreshold option by @davidjerleke in #469
• Add support for multiple realms by @davidjerleke in #475
• Bugfix #472 by @davidjerleke in #477
• Bugfix #486 by @davidjerleke in #487
• Bugfix #488 by @davidjerleke in #493
• Bump vite from 3.2.5 to 3.2.7 by @dependabot in #494
• Bugfix #514 by @davidjerleke in #520
• Bugfix #519 by @davidjerleke in #521
• ⚙️ Carousel Generator (previously "🤫 Secret project") by @davidjerleke in #522
• Make containScroll: 'trimSnaps' default by @davidjerleke in #524
• fix: Examples url path corrected by @Ronit-gurjar in #530
• fix: Packages-readme-examples link corrected by @Ronit-gurjar in #533
• Bugfix #536 by @davidjerleke in #537
• Adding a class only to the snapped slide by @davidjerleke in #543
• Prepare sandbox compilation for Vue and Svelte by @davidjerleke in #545
• Support using tab(focus) to select and navigate carousel by @davidjerleke in #549
• Bugfix #541 by @davidjerleke in #550
• Allow peer dep svelte ^4.0.0 by @anzbert in #556
• Fix old browsers not support add event to MediaQueryList by @hamidrezahanafi in #561
• Fix resize handler percision mismatch by @hamidrezahanafi in #570
• Auto generate contributors in README files by @davidjerleke in #573
• Rewrite tests so they test the final product instead of isolated components by @davidjerleke in #590
• Replace option align:number with a callback by @davidjerleke in #595
• Add "type: module" (nodenext) support alongside commonjs by @davidjerleke in #605
• Fix leak in slidesInView event by @fcasibu in #613
• Make EmblaEventType extendable for plugins by @davidjerleke in #618
• Expose the state for autoplay and events to listen to it by @davidjerleke in #620
• Bugfix #629 by @davidjerleke in #630
• Add focus interaction to autoplay by @nwidynski in #615
• Make reading element dimensions work regardless of transforms by @javiergonzalezGenially in #633
• Bugfix #647 by @davidjerleke in #651
• Bugfix #649 by @davidjerleke in #659
• Bugfix #644 by @davidjerleke in #660
• Bugfix #643 by @davidjerleke in #661
• Move Nodenext support script to Rollup build end hook by @davidjerleke in #664
• Add docs section in CONTRIBUTING.md by @zaaakher in #657
• Bugfix #672 by @davidjerleke in #677
• Use onBeforeUnmount instead of onUnmounted to separate embla DOM cleanup from Vue Reactivity by @sadeghbarati in #673
• Solid wrapper by @LiamMartens in #674
• Relocating CONTRIBUTING.md to root directory by @zaaakher in #681
• Bugfix #652 by @davidjerleke in #682
• Add TypeScript usage examples to the docs by @zaaakher in #658
• Bump graphql from 16.6.0 to 16.8.1 by @dependabot in #641
• Added embla-carousel as a dependency for CodeSandbox template by @zaaakher in #685
• Development walkthrough in CONTRIBUTING.md by @zaaakher in #683
• Improve bug report and feature request templates by @smultar in #671
• fix(build): update package.json files with correct "module" field by @ruijdacd in #699
• Update previous-and-next-buttons.md by @LucasMariniFalbo in #704
• [Bug]: Extra snapList point on some cases...

v8.0.0-rc23

🚨 Note!

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

🛠️ Bugfixes:

• #720 - UI issues when removing slides. Thanks @sshmaxime!

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

• Update 'events' Typescript example useEffect deps by @ranno-lauri in #729
• [Bug]: UI issues when removing slides by @davidjerleke in #728

New Contributors

• @ranno-lauri made their first contribution in #729

Full Changelog: v8.0.0-rc22...v8.0.0-rc23

v8.0.0-rc22

🚨 Note!

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

🌟 New features:

• #114 - [Feat]: Continuously running carousel (ticker, marquee, ..). Thanks @openscript, @mdrahiem!

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

• [Feat]: API section in docs - Add code examples for all wrappers by @davidjerleke in #725

Full Changelog: v8.0.0-rc21...v8.0.0-rc22

v8.0.0-rc21

🚨 Note!

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

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

• [Feat]: For Vue docs, use a more common SFC format by @mujahidfa in #701
• [Feat]: Add Pull Request template and discussion templates for all categories by @davidjerleke in #696
• [Feat]: Continuously running carousel (ticker, marquee, ..) by @davidjerleke in #634

New Contributors

• @mujahidfa made their first contribution in #701

Full Changelog: v8.0.0-rc20...v8.0.0-rc21

v8.0.0-rc20

🚨 Note!

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

🛠️ Bugfixes:

• #707 - [Bug]: Extra snapList point on some cases. Thanks @huri3l.
• #713 - [Bug]: Synced tabs doesn't always restore scroll position when selected tab changes.

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 TypeScript usage examples to the docs by @zaaakher in #658
• Bump graphql from 16.6.0 to 16.8.1 by @dependabot in #641
• Added embla-carousel as a dependency for CodeSandbox template by @zaaakher in #685
• Development walkthrough in CONTRIBUTING.md by @zaaakher in #683
• Improve bug report and feature request templates by @smultar in #671
• fix(build): update package.json files with correct "module" field by @ruijdacd in #699
• Update previous-and-next-buttons.md by @LucasMariniFalbo in #704
• [Bug]: Extra snapList point on some cases by @davidjerleke in #711
• [Bug]: Synced tabs doesn't always restore scroll position when selected tab changes by @davidjerleke in #714

New Contributors

• @smultar made their first contribution in #671
• @ruijdacd made their first contribution in #699
• @LucasMariniFalbo made their first contribution in #704

Full Changelog: v8.0.0-rc19...v8.0.0-rc20

v8.0.0-rc19

🚨 Note!

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

🌟 New features:

• #429 - SolidJS wrapper! Thanks @LiamMartens!

🛠️ Bugfixes:

• #652 - Loop + scrollTo with jump occasionally fails and selected slide turns white. Thanks @dlhagstroem.

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

• Use onBeforeUnmount instead of onUnmounted to separate embla DOM cleanup from Vue Reactivity by @sadeghbarati in #673
• Solid wrapper by @LiamMartens in #674
• Relocating CONTRIBUTING.md to root directory by @zaaakher in #681
• Bugfix #652 by @davidjerleke in #682

New Contributors

• @sadeghbarati made their first contribution in #673
• @LiamMartens made their first contribution in #674

Full Changelog: v8.0.0-rc18...v8.0.0-rc19

v8.0.0-rc18

🚨 Note!

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

🛠️ Bugfixes:

• #672 - No transitions on first slide while using navigation buttons when destroy and reinit the carousel. Thanks @sadeghbarati.

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

• Move Nodenext support script to Rollup build end hook by @davidjerleke in #664
• Add docs section in CONTRIBUTING.md by @zaaakher in #657
• Bugfix #672 by @davidjerleke in #677

New Contributors

• @zaaakher made their first contribution in #657

Full Changelog: v8.0.0-rc17...v8.0.0-rc18

v8.0.0-rc17

🚨 Note!

• In addition to all changes in v8.0.0-rc01, v8.0.0-rc02, v8.0.0-rc03, v8.0.0-rc04, v8.0.0-rc05, v8.0.0-rc06, v8.0.0-rc07, v8.0.0-rc08, v8.0.0-rc09, v8.0.0-rc10, v8.0.0-rc11, v8.0.0-rc12, v8.0.0-rc13, v8.0.0-rc14, v8.0.0-rc15 and v8.0.0-rc16 this release includes the following:

🛠️ Bugfixes:

• #643 - Destroying (eg on switching page) with autoplay plugin causes error: Cannot read properties of undefined (reading 'stopOnInteraction'). Thanks @tombryden.

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 #643 by @davidjerleke in #661

Full Changelog: v8.0.0-rc16...v8.0.0-rc17

v8.0.0-rc16

🚨 Note!

• In addition to all changes in v8.0.0-rc01, v8.0.0-rc02, v8.0.0-rc03, v8.0.0-rc04, v8.0.0-rc05, v8.0.0-rc06, v8.0.0-rc07, v8.0.0-rc08, v8.0.0-rc09, v8.0.0-rc10, v8.0.0-rc11, v8.0.0-rc12, v8.0.0-rc13, v8.0.0-rc14 and v8.0.0-rc15 this release includes the following:

🚨 Note!

• Anyone who has upgraded to v8.0.0-rc15 is strongly recommended to upgrade to this version.

🛠️ Bugfixes:

• #647 - EmblaOptionsType doesn't exists in React. Thanks @proninyaroslav!
• #649 - Scroll snap and slides to scroll calculations are too sensitive. Thanks @mozart77!
• #644 - Autoplay resumes before mouse has left the carousel container with stopOnMouseEnter set to true. Thanks @tombryden.

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 #647 by @davidjerleke in #651
• Bugfix #649 by @davidjerleke in #659
• Bugfix #644 by @davidjerleke in #660

Full Changelog: v8.0.0-rc15...v8.0.0-rc16

v8.0.0-rc15

🚨 Note!

• In addition to all changes in v8.0.0-rc01, v8.0.0-rc02, v8.0.0-rc03, v8.0.0-rc04, v8.0.0-rc05, v8.0.0-rc06, v8.0.0-rc07, v8.0.0-rc08, v8.0.0-rc09, v8.0.0-rc10, v8.0.0-rc11, v8.0.0-rc12, v8.0.0-rc13 and v8.0.0-rc14 this release includes the following:

🌟 New features:

• #637 - Make reading element dimensions work regardless of transforms. Thanks @javiergonzalezGenially!
• #619 - Expose the state for autoplay and events to listen to it. Thanks @kdzone!
• #616 - Add focus interaction to autoplay. Thanks @nwidynski!
• #594 - Replace option align:number with a callback. Thanks @tobimori!
• #481 - Add "type: module" (nodenext) support alongside commonjs. Thanks @chronoDave!

🛠️ Bugfixes:

• #614 - slidesInView memory leak - Not destroyed when carousel is dismantled. Thanks @fcasibu!
• #629 - SlideRegistry shouldn't group slides when containScroll:'trimSnaps' option is set. Thanks @sarussss!

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

• Auto generate contributors in README files by @davidjerleke in #573
• Rewrite tests so they test the final product instead of isolated components by @davidjerleke in #590
• Replace option align:number with a callback by @davidjerleke in #595
• Add "type: module" (nodenext) support alongside commonjs by @davidjerleke in #605
• Fix leak in slidesInView event by @fcasibu in #613
• Make EmblaEventType extendable for plugins by @davidjerleke in #618
• Expose the state for autoplay and events to listen to it by @davidjerleke in #620
• Bugfix #629 by @davidjerleke in #630
• Add focus interaction to autoplay by @nwidynski in #615
• Make reading element dimensions work regardless of transforms by @javiergonzalezGenially in #633

New Contributors

• @fcasibu made their first contribution in #613
• @nwidynski made their first contribution in #615
• @javiergonzalezGenially made their first contribution in #633

Full Changelog: v8.0.0-rc14...v8.0.0-rc15