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 by @davidjerleke in #711
• [Bug]: Synced tabs doesn't always restore scroll position when selected tab changes by @davidjerleke in #714
• [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
• [Feat]: API section in docs - Add code examples for all wrappers by @davidjerleke in #725
• Update 'events' Typescript example useEffect deps by @ranno-lauri in #729
• [Bug]: UI issues when removing slides by @davidjerleke in #728
• [Bug]: Autoplay and AutoScroll not destroyed properly by @davidjerleke in #751
• [Feat]: Angular wrapper by @donaldxdonald in #627
• Fixing a typo in the documentation by @cundd in #758
• [Feat]: Simplify sandbox generation and improve examples by @davidjerleke in #760

New Contributors

• @dependabot made their first contribution in #494
• @Ronit-gurjar made their first contribution in #530
• @anzbert made their first contribution in #556
• @hamidrezahanafi made their first contribution in #561
• @fcasibu made their first contribution in #613
• @nwidynski made their first contribution in #615
• @javiergonzalezGenially made their first contribution in #633
• @zaaakher made their first contribution in #657
• @sadeghbarati made their first contribution in #673
• @LiamMartens made their first contribution in #674
• @smultar made their first contribution in #671
• @ruijdacd made their first contribution in #699
• @LucasMariniFalbo made their first contribution in #704
• @mujahidfa made their first contribution in #701
• @ranno-lauri made their first contribution in #729
• @donaldxdonald made their first contribution in #627
• @cundd made their first contribution in #758

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