embla-carousel

A lightweight carousel library with fluid motion and great swipe precision.

MIT License

Downloads
11.9M
Stars
6K
Committers
46
View Code on GitHub Visit Website
Ecosystems: TypeScript, Svelte, Vue.js, React, JavaScript

Bot releases are visible (Hide)

embla-carousel - v8.0.0-rc20

Published by davidjerleke 9 months ago

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

What's Changed

New Contributors

Full Changelog: https://github.com/davidjerleke/embla-carousel/compare/v8.0.0-rc19...v8.0.0-rc20

embla-carousel - v8.0.0-rc19

Published by davidjerleke 10 months ago

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

What's Changed

New Contributors

Full Changelog: https://github.com/davidjerleke/embla-carousel/compare/v8.0.0-rc18...v8.0.0-rc19

embla-carousel - v8.0.0-rc18

Published by davidjerleke 10 months ago

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

What's Changed

New Contributors

Full Changelog: https://github.com/davidjerleke/embla-carousel/compare/v8.0.0-rc17...v8.0.0-rc18

embla-carousel - v8.0.0-rc17

Published by davidjerleke 10 months ago

🚨 Note!

πŸ› οΈ 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:

What's Changed

Full Changelog: https://github.com/davidjerleke/embla-carousel/compare/v8.0.0-rc16...v8.0.0-rc17

embla-carousel - v8.0.0-rc16

Published by davidjerleke 10 months ago

🚨 Note!

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

What's Changed

Full Changelog: https://github.com/davidjerleke/embla-carousel/compare/v8.0.0-rc15...v8.0.0-rc16

embla-carousel - v8.0.0-rc15

Published by davidjerleke 11 months ago

🚨 Note!

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

What's Changed

New Contributors

Full Changelog: https://github.com/davidjerleke/embla-carousel/compare/v8.0.0-rc14...v8.0.0-rc15

embla-carousel - v8.0.0-rc14

Published by davidjerleke about 1 year ago

🚨 Note!

πŸ› οΈ Bugfixes:

  • #571 - Resize handler precision mismatch. Thanks @hamidrezahanafi!
  • #568 - Carousel transition animation broken on Firefox (117). Thanks again @hamidrezahanafi!

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: https://github.com/davidjerleke/embla-carousel/compare/v8.0.0-rc13...v8.0.0-rc14

embla-carousel - v8.0.0-rc13

Published by davidjerleke about 1 year ago

🚨 Note!

πŸ› οΈ Bugfixes:

  • #560 - Safari 13.x t.addEventListener is not a function. Thanks @hamidrezahanafi!

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: https://github.com/davidjerleke/embla-carousel/compare/v8.0.0-rc12...v8.0.0-rc13

embla-carousel - v8.0.0-rc12

Published by davidjerleke about 1 year ago

🚨 Note!

🌟 New features:

  • #456 - Support using tab(focus) to select and navigate carousel. Thanks @winston0410!
  • #558 - emblaApi.slidesInView() should use IntersectionObserver.
  • #535 - Dependency conflict when using embla-carousel-svelte in a project with the new Svelte version 4. Thanks @anzbert!
  • #542 - Adding a class only to the snapped slide. Thanks @jln13x!

πŸ› οΈ Bugfixes:

  • #541 - After running for a while 'cannot read properties of undefined' error is thrown. Thanks @jjachowski!
  • #536 - slidesToScroll: 'auto' isn't compatible with margins or gap slide spacings.

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: https://github.com/davidjerleke/embla-carousel/compare/v8.0.0-rc11...v8.0.0-rc12

embla-carousel - v8.0.0-rc11

Published by davidjerleke over 1 year ago

🚨 Note!

πŸ› οΈ Bugfixes:

  • ScrollBody direction is wrong sometimes (edge case).

Donations

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

Full Changelog: https://github.com/davidjerleke/embla-carousel/compare/v8.0.0-rc10...v8.0.0-rc11

embla-carousel - v8.0.0-rc10

Published by davidjerleke over 1 year ago

🚨 Note!

🌟 New Features:

βš™οΈ Embla Carousel generator - Check it out here πŸŽ‰!

#504 - βš™οΈ Carousel Generator

Donations

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

embla-carousel - v8.0.0-rc09

Published by davidjerleke over 1 year ago

🚨 Note!

πŸ’₯ Changes:

  • #507 - The containScroll option default is now: 'trimSnaps'. Thanks @MaxDesignFR.

πŸ› οΈ Bugfixes:

  • #519 - Library crash when using breakpoints. Thanks @hamidrezahanafi.

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: https://github.com/davidjerleke/embla-carousel/compare/v8.0.0-rc08...v8.0.0-rc09

embla-carousel - v8.0.0-rc08

Published by davidjerleke over 1 year ago

🚨 Note!

πŸ› οΈ Bugfixes:

  • #514 - scrollTo with jump doesn't work on iOS. Thanks @dlhagstroem.

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: https://github.com/davidjerleke/embla-carousel/compare/v8.0.0-rc07...v8.0.0-rc08

embla-carousel - v8.0.0-rc07

Published by davidjerleke over 1 year ago

🚨 Note!

πŸ› οΈ Bugfixes:

  • #488 - Uncaught "ResizeObserver loop limit exceeded". Thanks @hmartiins, @VadymBezsmertnyi and @tobimori!

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: https://github.com/davidjerleke/embla-carousel/compare/v8.0.0-rc06...v8.0.0-rc07

embla-carousel - v8.0.0-rc06

Published by davidjerleke over 1 year ago

🚨 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: https://github.com/davidjerleke/embla-carousel/compare/v8.0.0-rc05...v8.0.0-rc06

embla-carousel - v8.0.0-rc05

Published by davidjerleke over 1 year ago

🚨 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: https://github.com/davidjerleke/embla-carousel/compare/v8.0.0-rc04...v8.0.0-rc05

embla-carousel - v8.0.0-rc04

Published by davidjerleke over 1 year ago

🚨 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: https://github.com/davidjerleke/embla-carousel/compare/v8.0.0-rc03...v8.0.0-rc04

embla-carousel - v8.0.0-rc03

Published by davidjerleke over 1 year ago

🚨 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: https://github.com/davidjerleke/embla-carousel/compare/v8.0.0-rc02...v8.0.0-rc03

embla-carousel - v8.0.0-rc02

Published by davidjerleke over 1 year ago

🚨 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: https://github.com/davidjerleke/embla-carousel/compare/v8.0.0-rc01...v8.0.0-rc02

embla-carousel - v8.0.0-rc01

Published by davidjerleke over 1 year ago

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

What's Changed

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

Package Rankings
Top 1.17% on Npmjs.org
Related Projects
react-multi-carousel

A lightweight production-ready Carousel that rocks supports multiple items and server-side render...

02 Mar 2019 1,228
react-slick

React carousel component

16 Nov 2014 11,547
react-responsive-carousel

React.js Responsive Carousel (with Swipe)

08 Feb 2015 2,667
react-swipeable-views

A React component for swipeable views.

22 Sep 2015 4,458
react-free-carousel

Carousel component for free flex-box layout built with React.

21 Jul 2017 4
uilayout

πŸ”₯50+ Free beautifull interactive react/nextjs component based on tailwindcss, framer-motion, gsap...

11 Aug 2024 290
react-spring-carousel

A new Carousel experience for the web.

07 Dec 2021 68
react-elastic-carousel

A flexible and responsive carousel component for react https://sag1v.github.io/react-elastic-caro...

30 Aug 2018 345
react-awesome-slider

React content transition slider. Awesome Slider is a 60fps, light weight, performant component th...

12 Jun 2016 2,880
splide

Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No depend...

25 Jul 2019 4,681
react-native-swiper

The best Swiper component for React Native.

20 Apr 2015 10,338
react-snap-carousel

DOM-first, headless carousel for React

19 Dec 2022 236
react-styled-carousel

React styled components carousel or slide show. No external css import is required.

21 Feb 2018 44
keen-slider

The HTML touch slider carousel with the most native feeling you will get.

09 Apr 2020 4,673