A lightweight carousel library with fluid motion and great swipe precision

Related tags

Sliders react javascript slideshow mobile typescript vanilla slider touch carousel carousel-component mobile-web carousel-plugin slider-plugin dependency-free touch-evens
Overview

Embla Carousel

Embla Carousel

Embla Carousel is a bare bones carousel library with great fluid motion and awesome swipe precision. It's library agnostic, dependency free and 100% open source. Build awesome carousels by extending Embla Carousel with your own CSS and JavaScript.


 Installation 

 API Reference 

 Examples 


Platforms

Embla Carousel is ready to use with the following tools/libraries.

   


Contributors

Thank you to all contributors for making Embla Carousel awesome! Contributions are welcome.


Special Thanks

Massive thanks to gunnarx2 for creating the useEmblaCarousel hook and to xiel for creating the Embla Carousel Wheel Gestures package.


Open Source

Copyright © 2019-present, David Cetinkaya.
Embla is MIT licensed 💖 .

· · ·

Thanks BrowserStack.

Comments
  • Options object doesn't work after migration

    Options object doesn't work after migration

    Options object doesn't work after migration from embla-carousel-react to embla-carousel/react

    my config:

    const [EmblaCarouselReact, embla] = useEmblaCarousel({
    align: 'start',
    slidesToScroll: 1,
    loop: true,
});

    Loop doesn't work. If emblaCarousel loads for the first time, after dragging I get "maximum call stack size exceeded" error.

    image

    It doesn't work on embla-carousel-react v2.0.3 either.

    I tried to migrate from version: ^1.3.3

    not a bug 
    opened by damian-balas 50
  • The Slider is skipping other items

    The Slider is skipping other items

    Hello, when users swipe hard enough it looks like its skipping other slides, how can we limit it to only one slide per swipe? slidesToScroll: 1 doesn't seem to do anything

    const wrap = document.querySelector('.js-home-slider');
  const viewPort = wrap.querySelector('.js-home-slider-viewport');
  const dots = wrap.querySelector('.js-home-slider-dots');
  const homesliderStart = EmblaCarousel(viewPort, {
    loop: true,
    draggable: true,
    dragFree: false,
    speed: 10,
    startIndex: 0,
    slidesToScroll: 1,
  });
    feature request resolved 
    opened by leah-cc 33
  • ⭐ v7

    ⭐ v7

    v7

    New features

    • [x] #322
    • [x] #329
    • [x] #17
    • [x] #307
    • [x] #305
    • [x] #327
    • [x] #330

    Changes

    • [x] #331
    • [x] #60 - The transform unit will change: From % to px. As a result, the position: relative style on the slides needed for loop carousels to work, will be unnecessary.

    Bugfixes

    • [x] #285
    • [x] #317

    Breaking Changes

    • [x] #327

    Features that will be removed

    • [x] Pseudo options
    feature request resolved v7 
    opened by davidjerleke 30
  • Add support for wheel event scrolling

    Add support for wheel event scrolling

    When using touchpad on an MacBook, you can use two-finger gestures for scrolling. As far as I understand, these values are available through "wheel" events in javascript.

    It would be very nice to have support for horizontal scrolling using touchpad in Embla Carousel if possible.

    Here is a fiddle that demonstrates the values received: https://jsfiddle.net/64p5r459/2/

    feature request resolved 
    opened by sphair 30
  • Gatsby - On route change embla looses slides

    Gatsby - On route change embla looses slides

    Hey David!

    Hope you are doing great.

    Using Gatsby the slide I built works fine until I change to another page that uses the slider as well:

    https://user-images.githubusercontent.com/45669613/109027254-e30cd700-76c0-11eb-92e3-7bdb10cbb5ea.mp4

    It seems, that although next etc still triggers, the slider looses the node list / slides. I tried to force reinit with useEffect, but to no avail.

    Interestingly the sliders starts to work again, when I change options, like for example draggable, but that could be of course because of the development hot reload.

    Are you familiar with this issue? What procedure would you suggest for this case for debugging?

    Thank you and all the best!

    opened by Hahlh 27
  • Initial Carousel Blank

    Initial Carousel Blank

    Bug is related to

    • [ ] embla-carousel (core package)
    • [x] embla-carousel-react
    • [ ] embla-carousel-autoplay
    • [ ] embla-carousel-docs (documentation website)

    Embla Carousel version

    • v6.0.2

    Describe the bug

    Embla carousel is initially blank, and needs to be resized before it renders the image. This happens only sometimes and randomly. I have read the other issues regarding the same, but none of the tehniques work, I understand its a reinitializing issue but cannot figure out how to make it work. I am using it with NextJs 12.

    I have the sample code to get started in this github repo - https://github.com/kush-daga/emblademo

    CodeSandbox

    • The link to a CodeSandbox that demonstrates the bug clearly.

    Steps to reproduce

    1.Clone the https://github.com/kush-daga/emblademo repo, and yarn dev. 2. Initially its a blank screen, resize to view images.

    Expected behavior

    • Carousel should work in the first render

    Additional context

    https://user-images.githubusercontent.com/40840079/148800760-3ec6e86e-4314-4978-815c-f463d06a2aa1.mp4

    resolved demonstration not a bug 
    opened by kush-daga 21
  • Automatic and slow scroll with dragFree

    Automatic and slow scroll with dragFree

    I was wondering if there is a way to slowly auto scroll the content of a carousel with the dragFree option? In order to sort of show to users that there is more content in a nice way.

    Kind of something like that, but automatically:

    autoscroll

    resolved demonstration 
    opened by flayks 21
  • Create an option to block excessive scrolling

    Create an option to block excessive scrolling

    Hi @davidjerleke!

    Embla currently has ways to remove the leading and trailing blanks from the Slider (containsScroll: true), but still allow for excessive scrolling. It would be interesting to add an option to block this scroll and stop it when it reaches the end or beginning of the Slider. I would like to know what you think of this idea

    Below is the example of the "excessive scroll" I am referring to

    Captura de Tela (21)

    feature request 
    opened by alexrintt 21
  • Scroll Progress (set)

    Scroll Progress (set)

    👉 Feature Specification

    // set scroll progress
// accepts a number from 0 - 1 representing % scrolled of scrollable distance
// scroll to target is smooth

embla.scrollToProgress(0.5)

    As discussed in issue #21.

    Special thanks

    @xiel for this feature request.

    feature request resolved 
    opened by davidjerleke 21
  • TypeErrorCannot read property '0' of undefined

    TypeErrorCannot read property '0' of undefined

    Hey! Let me first say, loving the library so far. Very easy to get a really nice carousel with 0 config :) So thanks for the nice defaults.

    I just got this error reported in my error tracking, and it leads to embla-carousel/lib/index.

    Environment:

Chrome Mobile Version 77.0.3865
Android Version 8.0.0

TypeError: Cannot read property '0' of undefined
 at ./node_modules/embla-carousel/lib/index.js(read:1589:46)
 at ./node_modules/embla-carousel/lib/index.js(apply:1417:29)
 at ./node_modules/logrocket/dist/build.umd.js(HTMLElement.o:2857:31)

    chrome_2019-10-11_22-49-17

    So that's

    ./node_modules/embla-carousel/lib/index.js in read on line 1589:46
1586 | function read(evt, axis) {
1587 | var isMouse = state.isMouse;
1588 | var c = coords[axis];
1589 | var value = isMouse ? evt[c] : evt.touches[0][c];
1590 | return pointValue.setNumber(value);
1591 | }
1592 |  
1593 | function down(evt) {
1594 | state.isMouse = !!evt.type.match(/mouse/);

./node_modules/embla-carousel/lib/index.js in apply on line 1417:29
1413 | var resist = !params.loop && reachedLimit ? 2 : 1;
1414 | target.addNumber(diff / resist);
1415 | evt.preventDefault();
1416 | } else {
1417 | var X = pointer.read(evt, 'x').get();
1418 | var Y = pointer.read(evt, 'y').get();
1419 | var diffX = Math.abs(X - startX.get());
1420 | var diffY = Math.abs(Y - startY.get());
1421 | state.preventScroll = diffX > diffY;
1422 | if (!state.preventScroll && !state.preventClick) up();

    If you need some copy and paste friendly text.

    Not really sure how to go from here! I was going to default value to 0 if evt.touches is not defined although that is just a hack :)

    Thanks!

    bug resolved 
    opened by bitttttten 20
  • Continuously running carousel (ticker, marquee, ..)

    Continuously running carousel (ticker, marquee, ..)

    Hello everybody

    I'm using Embla already in a project and it's great. Thank you for the amazing work!

    Now I have the use case to build a carousel which runs continuously like a "stock market" ticker. So no speed up and slow down. Do you think it's easy to build something like that with Embla? Where would be a good starting point?

    resolved demonstration 
    opened by openscript 19
  • Investigate migrating docs from Gatsby to Docusaurus

    Investigate migrating docs from Gatsby to Docusaurus

    Feature request is related to

    • [x] embla-carousel-docs (documentation website)

    Is your feature request related to an issue?

    • No. All the Gatsby and MDX major versions are causing millions of problems on every upgrade. And the Gatsby error messages aren't helpful at all or even accurate to begin with. You always have to wildly guess what could be wrong and this is insanely time consuming.

    Describe the solution you'd like

    • Investigate the main pain points of migrating the docs to Docusaurus.
    feature request documentation 
    opened by davidjerleke 0
  • Add option to control the rubber band stiffness

    Add option to control the rubber band stiffness

    Feature request is related to

    • [x] embla-carousel (core package)
    • [ ] embla-carousel-react
    • [ ] embla-carousel-vue
    • [ ] embla-carousel-svelte
    • [ ] embla-carousel-autoplay
    • [ ] embla-carousel-auto-height
    • [ ] embla-carousel-class-names
    • [ ] embla-carousel-docs (documentation website)

    Is your feature request related to an issue?

    I want to control the rubber band effect when attempting to swipe outside of where the slides are.

    Describe the solution you'd like

    A number option labeled for example rubberBandStiffness or something similar

    Describe alternatives you've considered

    I haven't considered alternatives

    Additional context

    Video describing what I want to control:

    https://user-images.githubusercontent.com/58148984/208880765-1110f762-76b1-44f7-a09f-f7aa152b1d39.mov

    feature request 
    opened by PumpedSardines 0
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Interacting with a dropdown within the slider starts drag and drop behaviour

    Interacting with a dropdown within the slider starts drag and drop behaviour

    Bug is related to

    • [x] embla-carousel (core package)

    Embla Carousel version

    • v7.0.0

    Describe the bug

    • When interacting with a dropdown element inside of the slides, safari will be locked into free-drag state

    CodeSandbox

    - The link to a CodeSandbox that demonstrates the bug clearly.

    Steps to reproduce

    1. Go to the sandbox with a safari browser
    2. Click on the dropdown and make a selection
    3. Move the mouse without clicking anything
    4. See error

    Expected behavior

    • Interacting with input elements should not be an interaction with the slider

    Additional context

    • This might effect mobile safari as well. This might be related to drag- and touch events.
    • Behaviour might be fixed with a stopPropagation at the right place
    • Its unclear why this only happens when using Safari
    bug awaiting response 
    opened by ChristianHoffmannS2 7
  • Bump terser from 5.14.1 to 5.15.1

    Bump terser from 5.14.1 to 5.15.1

    Bumps terser from 5.14.1 to 5.15.1.

    Changelog

    Sourced from terser's changelog.

    v5.15.1

    • Fixed missing parentheses around optional chains
    • Avoid bare let or const as the bodies of if statements (#1253)
    • Small internal fixes (#1271)
    • Avoid inlining a class twice and creating two equivalent but !== classes.

    v5.15.0

    • Basic support for ES2022 class static initializer blocks.
    • Add AudioWorkletNode constructor options to domprops list (#1230)
    • Make identity function inliner not inline id(...expandedArgs)

    v5.14.2

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    • Source maps improvements (#1211)
    • Performance improvements in long property access evaluation (#1213)
    Commits
    • 4255fb3 5.15.1
    • d31c829 update changelog
    • bb2e20f take optional chains into account when locating the left-most item in an expr...
    • 350f965 some cleanups
    • 5fc3925 Update actions/setup-node action to v3 (#1156)
    • be73559 Update actions/upload-artifact action to v3 (#1161)
    • 666f79e chore(deps): update actions/checkout action to v3 (#1158)
    • 3652dce fix: incorrect to_simple_statement (#1253)
    • 34e8262 chore: fixed a couple of typos (#1271)
    • 089e32a avoid a class being inlined twice when identity can be compared. (close #1267)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 2
Releases(v7.0.5)

  • v7.0.5(Nov 8, 2022)

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

    • [x] #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:

    What's Changed

    • chore: Add React ^16.8 and ^17 to peer deps. by @horseeyephil in https://github.com/davidjerleke/embla-carousel/pull/392

    New Contributors

    • @horseeyephil made their first contribution in https://github.com/davidjerleke/embla-carousel/pull/392

    Full Changelog: https://github.com/davidjerleke/embla-carousel/compare/v7.0.4...v7.0.5

    Source code(tar.gz)
    Source code(zip)

  • v7.0.4(Oct 29, 2022)

    🚨 Note!

    • If you have been using v7.0.0-v7.0.3 with NextJS you’re encouraged to update your package to v7.0.4.

    🛠️ Bugfixes:

    • [x] #384 - Endless scrolling in NextJS prod bundle.

    Donations

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

    What's Changed

    • Docs: improve explanation of the speed option by @SaizFerri in https://github.com/davidjerleke/embla-carousel/pull/381

    New Contributors

    • @SaizFerri made their first contribution in https://github.com/davidjerleke/embla-carousel/pull/381

    Full Changelog: https://github.com/davidjerleke/embla-carousel/compare/v7.0.3...v7.0.4

    Source code(tar.gz)
    Source code(zip)

  • v7.0.3(Sep 12, 2022)

    🛠️ Bugfixes:

    • [x] #366 - Vue package - Incorrect types for emblaApi

    Donations

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

    What's Changed

    • Vue Package: fixed types for emblaApi. #366 by @rojadesign in https://github.com/davidjerleke/embla-carousel/pull/367

    New Contributors

    • @rojadesign made their first contribution in https://github.com/davidjerleke/embla-carousel/pull/367

    Full Changelog: https://github.com/davidjerleke/embla-carousel/compare/v7.0.2...v7.0.3

    Source code(tar.gz)
    Source code(zip)

  • v7.0.2(Aug 31, 2022)

    🌟 New features:

    • [x] #357 - Autoplay jump parameter - Thanks to @th-km for the idea 💡!

    Donations

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

    What's Changed

    • Add Autoplay jump parameter by @davidjerleke in https://github.com/davidjerleke/embla-carousel/pull/359

    Full Changelog: https://github.com/davidjerleke/embla-carousel/compare/v7.0.1...v7.0.2

    Source code(tar.gz)
    Source code(zip)

  • v7.0.1(Aug 18, 2022)

    🚨 Note!

    • Everyone who has been using v7.0.0rc-x and v7.0.0 up is encouraged to update their package to v7.0.1.

    🛠️ Bugfixes

    • [x] #355 - Thanks goes to @joaopluis for reporting the bug.

    What's Changed

    • Bugfix for #355 by @davidjerleke in https://github.com/davidjerleke/embla-carousel/pull/356

    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/v7.0.0...v7.0.1

    Source code(tar.gz)
    Source code(zip)

  • v7.0.0(Aug 1, 2022)

    🌟 New features:

    • [x] #322 - Breakpoints option
    • [x] #327 - Expose plugin API:s from the Embla API
    • [x] #329 - Active option
    • [x] #330 - New option value: slidesToScroll: auto
    • [x] #305 - React 18 Support
    • [x] #17 - Vue 3 wrapper
    • [x] #307 - Svelte wrapper

    ➡️ Changes

    • [x] #331 - containScroll: Account for edge spacing
    • [x] #60 - The transform unit has changed from % to px. As a result, the position: relative style on the slides needed for loop carousels to work is not necessary anymore.

    🛠️ Bugfixes

    • [x] #285 - Non-visible slides when using CSS grid in combination with loop: true
    • [x] #317 - Embla + Framer Motion + Flubber makes slides "disappear"

    💥 Breaking Changes

    • [x] #327 - Expose plugin API:s from the Embla API

    ❌ Features removed

    • [x] Pseudo options

    What's Changed

    • Fix typo by @silllli in https://github.com/davidjerleke/embla-carousel/pull/280
    • Add a hint for flexbox and autoheight compatability by @JoshuaCrewe in https://github.com/davidjerleke/embla-carousel/pull/294
    • Update changing options through CSS by @th-km in https://github.com/davidjerleke/embla-carousel/pull/303
    • Docs: Add target option (Wheel Gestures Plugin) by @xiel in https://github.com/davidjerleke/embla-carousel/pull/311
    • v7 by @davidjerleke in https://github.com/davidjerleke/embla-carousel/pull/300
    • Typing of Embla Plugins by @xiel in https://github.com/davidjerleke/embla-carousel/pull/335
    • Vue 3 wrapper by @davidjerleke in https://github.com/davidjerleke/embla-carousel/pull/336
    • v7 docs by @davidjerleke in https://github.com/davidjerleke/embla-carousel/pull/337
    • Svelte Wrapper by @davidjerleke in https://github.com/davidjerleke/embla-carousel/pull/342

    New Contributors

    • @silllli made their first contribution in https://github.com/davidjerleke/embla-carousel/pull/280
    • @JoshuaCrewe made their first contribution in https://github.com/davidjerleke/embla-carousel/pull/294
    • @th-km made their first contribution in https://github.com/davidjerleke/embla-carousel/pull/303

    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/v6.2.0...v7.0.0

    Source code(tar.gz)
    Source code(zip)

  • v7.0.0-rc05(Jul 16, 2022)

    🚨 Note!

    • Any plugins you intend to use with this version also has to be v7.0.0-rc05.
    • ⭐ v7 feature specification - Click here

    🌟 New features

    • [x] #17 - Vue 3 wrapper

    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/v7.0.0-rc04...v7.0.0-rc05

    Source code(tar.gz)
    Source code(zip)

  • v7.0.0-rc04(Jul 7, 2022)

    🚨 Note!

    • Any plugins you intend to use with this version also has to be v7.0.0-rc04.
    • ⭐ v7 feature specification - Click here

    🛠️ Bugfixes

    • [x] Typing of Embla Plugins by @xiel in https://github.com/davidjerleke/embla-carousel/pull/335

    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/v7.0.0-rc03...v7.0.0-rc04

    Source code(tar.gz)
    Source code(zip)

  • v7.0.0-rc03(Jul 5, 2022)

    🚨 Note!

    • Any plugins you intend to use with this version also has to be v7.0.0-rc03.
    • ⭐ v7 feature specification - Click here

    🛠️ Bugfixes

    • [x] #332 Stale plugin options

    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/v7.0.0-rc01...v7.0.0-rc03

    Source code(tar.gz)
    Source code(zip)

  • v7.0.0-rc01(Jun 30, 2022)

    🚨 Note!

    • Any plugins you intend to use with this version also has to be v7.0.0-rc01.

    🌟 New features:

    • [x] #322 - Breakpoints option
    • [x] #327 - Expose plugin API:s from the Embla API
    • [x] #329 - Active option
    • [x] #330 - New option value: slidesToScroll: auto
    • [x] #305 - React 18 Support

    ➡️ Changes

    • [x] #331 - containScroll: Account for edge spacing
    • [x] #60 - The transform unit has changed from % to px. As a result, the position: relative style on the slides needed for loop carousels to work is not necessary anymore.

    🛠️ Bugfixes

    • [x] #285 - Non-visible slides when using CSS grid in combination with loop: true
    • [x] #317 - Embla + Framer Motion + Flubber makes slides "disappear"

    💥 Breaking Changes

    • [x] #327 - Expose plugin API:s from the Embla API

    ❌ Features removed

    • [x] Pseudo options

    Donations

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

    Source code(tar.gz)
    Source code(zip)

  • v6.2.0(Feb 6, 2022)

  • v6.1.1(Jan 19, 2022)

  • v6.1.0(Jan 15, 2022)

  • v6.0.2(Nov 22, 2021)

  • v6.0.1(Nov 9, 2021)

  • v6.0.0(Nov 5, 2021)

    🌟 New features:

    • [x] #230 - Plugin system

    New plugins:

    Deprecated options:

    • [x] selectedClass
    • [x] draggableClass
    • [x] draggingClass

    Default option values that have changed:

    • [x] skipSnaps: true --> false

    Renamed methods:

    • [x] dangerouslyGetEngine --> internalEngine

    Browser support changes:

    ~~New internal behaviour:~~ (postponed to later release)

    • [ ] ~~The transform unit will change from % to px. A side effect of this will be that the position: relative needed for loop carousels won't be necessary anymore.~~

    Donations

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

    Source code(tar.gz)
    Source code(zip)

  • v5.0.1(Sep 27, 2021)

  • v5.0.0(Sep 27, 2021)

    Note! This major release comes with breaking changes for React users only ⚛️!

    ✅ The new, correct way to use Embla with React from v5.0.0 and up:

    import useEmblaCarousel from 'embla-carousel-react'

    ❌ This won't work anymore:

    import { useEmblaCarousel } from 'embla-carousel/react'

    🌟 Improvements

    • Migration from Yarn 1 --> Yarn 2 comes with a lot of great monorepo improvements.
    • The react version of Embla Carousel is now its own dedicated package.
    Source code(tar.gz)
    Source code(zip)

  • v4.5.3(May 24, 2021)

  • v4.5.2(May 23, 2021)

  • v4.5.1(Apr 28, 2021)

  • v4.5.0(Apr 22, 2021)

    🌟 New Features

    Solves issue #38. With this release, it's possible to turn off the behavior where the carousel skips scroll snaps when it's dragged vigorously. This will be an opt-in option for now, but with the next major release (v.5), this will be the default behavior.

    Read more here.

    Source code(tar.gz)
    Source code(zip)

  • v4.4.1(Apr 21, 2021)

  • v4.4.0(Apr 11, 2021)

    🌟 New Features

    Solves issue #176. With this release, it's possible to scroll instantly to a scroll snap with the jump parameter. It's a boolean and default is false. The following methods accept the jump parameter:

    Usage

    embla.scrollTo(3) // Smooth scroll to scroll snap index 3
embla.scrollTo(3, true) // Instant jump to scroll snap index 3

embla.scrollPrev()  // Smooth scroll to the previous scroll snap
embla.scrollPrev(true)  // Instant jump to the previous scroll snap

embla.scrollNext()  // Smooth scroll to the next scroll snap
embla.scrollNext(true)  // Instant jump to the next scroll snap

    Bundle size

    This feature doesn't add anything to the bundle size.

    v4 4 0

    Enjoy!

    Source code(tar.gz)
    Source code(zip)

  • v4.3.2(Apr 5, 2021)

  • v4.3.1(Apr 1, 2021)

  • v4.3.0(Mar 21, 2021)

    🌟 New Features

    Solves issue #156. With this release, it's possible to declare different options for different breakpoints. It's achieved by using the content attribute of the pseudo element :before on the root node:

    .embla:before {
  display: none;
  content: '{
    "slidesToScroll": 1,
    "draggable": true
  }';
}
@media (min-width: 768px) {
  .embla:before {
    content: '{
      "slidesToScroll": 2,
      "draggable": false
    }';
  }
}

    Enjoy!

    Source code(tar.gz)
    Source code(zip)

  • v4.2.1(Mar 17, 2021)

  • v4.2.0(Mar 11, 2021)

    🌟 New Features

    This is definitely one of the most exciting releases in a while. This release ships with awesome new features:

    Auto Spacing Detection

    Embla will automatically detect any spacings between the slides whether it's margins or grid gaps, and automagically align the scroll snaps accordingly. This gives users a whole new level of freedom and convenience when setting up their carousels. This marks the beginning of Embla Carousel fully supporting any CSS that aligns your slides horizontally or vertically, whether it's CSS Grid, Flexbox or any other setup. This is more to the spirit of Embla Carousel which aims to have a minimal footprint.

    Usage

    For example, add spacing between your slides like so:

    .embla__slide {
  margin-right: 20px;
}

    ...or like so:

    .embla__container {
  grid-column-gap: 20px;
}

    Root Node Method

    Before this release, Embla exposed its container node and slide nodes with the embla.containerNode() and embla.slideNodes() methods. This release also exposes the rootNode with the following method embla.rootNode().

    Usage

    The root node is equivalent to the first argument you pass to the EmblaCarousel(rootNode: HTMLElement, option: EmblaOptions) initalizer. It's been added for convenience, in case you need to access that node in any context where you have access to the embla instance.

    const embla = EmblaCarousel(emblaNode /* <--- this is equivalent to... */, options)
const rootNode = embla.rootNode() /* <--- ...this node */

    🛠️ Bugfixes

    • #151

    Last but not least

    This release makes the total bundle size 6% smaller 🎉 😍.

    Enjoy! David

    Source code(tar.gz)
    Source code(zip)

  • v4.1.5(Mar 2, 2021)

Owner
David
Decaf ☕️. Couch Co-Op 🛋🎮. Code 💻.
David
GitHub https://www.embla-carousel.com
Swiffy-slider - Super fast carousel and slider with touch for optimized websites running in modern browsers.

Swiffy Slider Super fast lightweight carousel and slider with touch for optimized websites running in modern browsers. Explore Swiffy Slider docs » Se

Dynamicweb Software A/S 149 Dec 28, 2022
the last carousel you'll ever need

slick the last carousel you'll ever need Demo http://kenwheeler.github.io/slick CDN To start working with Slick right away, there's a couple of CDN ch

Ken Wheeler 27.8k Jan 4, 2023
Extended carousel based on Bootstrap 5 using only vanilla js.

Description Extended Slider based on Bootstrap 5 using only carousel component and vanilla js. Requirements: Bootstrap 5 Installation npm i -D extende

Carlos Pozo 7 Jul 26, 2022
noUiSlider is a lightweight JavaScript range slider library with full multi-touch support. It fits wonderfully in responsive designs and has no dependencies.

noUiSlider noUiSlider is a lightweight JavaScript range slider. No dependencies All modern browsers and IE > 9 are supported Fully responsive Multi-to

Léon Gersen 5.4k Dec 28, 2022
OlumSlider is a lightweight and flexible slider, written via vanilla js

olum-slider OlumSlider is a lightweight and flexible slider, written via vanilla js Documentation CDN <!DOCTYPE html> <html lang="en"> <head> <t

Olumjs 0 Oct 8, 2021
JavaScript library for one-directional scrolling with item based navigation support.

Sly JavaScript library for one-directional scrolling with item based navigation support. Sly supports navigation with: mouse wheel scrolling scrollbar

null 2.9k Dec 23, 2022
🎨 A simple library for extracting dominant colors from images.

A dead simple, zero-dependency, promise-based javascript library for extracting the dominant color(s) from an image (in the browser). ?? Version 2 was

Brian Gonzalez 1.7k Jan 4, 2023
It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

impress.js It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prez

impress.js 37.1k Jan 3, 2023
It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

impress.js It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prez

impress.js 37.1k Jan 3, 2023
Vegas is a jQuery/Zepto plugin to add beautiful backgrounds and Slideshows to DOM elements.

Vegas – Backgrounds and Slideshows Vegas is a jQuery/Zepto plugin to add beautiful backgrounds and Slideshows to DOM elements. Important note: Vegas 2

Jay Salvat 1.8k Jan 7, 2023
The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications.

Sequence.js The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications. Sequence.js

Ian Lunn 3.4k Dec 20, 2022
Strut - An Impress.js and Bespoke.js Presentation Editor

All new development is happening in Strut2 Strut2 is currently private until we further solidify our "open source dividened program." Open Source Divd

Matthew Wonlaw 1.7k Dec 30, 2022
JavaScript image gallery for mobile and desktop, modular, framework independent

PhotoSwipe Repository JavaScript image gallery for mobile and desktop. Documentation and getting started guide. Demo and script home page. NPM npm ins

Dmitry Semenov 22.5k Dec 30, 2022
A jQuery plugin for a slider with adaptive colored figcaption and navigation.

Adaptive Slider jQuery Plugin A jQuery plugin for a slider with adaptive colored figcaption and navigation. This plugin will take a list of figure ele

null 53 Jan 3, 2023
Quick and easy spring animation. Works with other animation libraries (gsap, animejs, framer motion, motion one, @okikio/animate, etc...) or the Web Animation API (WAAPI).

spring-easing NPM | Github | Docs | Licence Quick and easy spring animations. Works with other animation libraries (gsap, animejs, @okikio/animate, mo

Okiki Ojo 34 Dec 14, 2022
TS & JS Library for adaptive precision cursor for the web. Releases will come out soon! Meanwhile, check out the demo site:

Haha, cool cursor go brrrr... Table of Content What is this? Installation & Setup Installation Setup Usage Cursor controls Element settings Known issu

LemonOrange 10 Nov 24, 2022
A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Introducing FitVids.js A lightweight, easy-to-use jQuery plugin for fluid width video embeds. FitVids automates the Intrinsic Ratio Method by Thierry

Dave Rupert 4.8k Dec 24, 2022
Fast and robust triangle-triangle intersection test with high precision for cross and coplanar triangles based on the algorithm by Devillers & Guigue.

fast-triangle-triangle-intersection Fast and robust triangle-triangle intersection test with high precision for cross and coplanar triangles based on

Technology and knowledge for interaction 10 Nov 15, 2022
:zap: A sliding swipe menu that works with touchSwipe library.

Slide and swipe menu A sliding menu that works with touchSwipe library. Online demo Visit plugin site. Appszoom also uses it! So cool! What's the diff

Joan Claret 138 Sep 27, 2022
↔️ Swipe through Home Assistant Dashboard views on mobile.

Home Assistant Swipe Navigation Swipe through Home Assistant Dashboard views on mobile. This repository has been forked from maykar/lovelace-swipe-nav

Zanna_37 71 Dec 26, 2022