# embla-carousel-wheel-gestures

> wheel gestures for embla carousel

Latest version **8.1.0** (published 2025-08-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install embla-carousel-wheel-gestures
pnpm add embla-carousel-wheel-gestures
yarn add embla-carousel-wheel-gestures
bun add embla-carousel-wheel-gestures
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 8.1.0 |
| Published | 2025-08-12 |
| First published | 2020-06-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 1 |
| Unpacked size | 143.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 67 |
| Author | Felix Leupold |
| Maintainers | xiel |
| Keywords | wheel, scroll, mouse, trackpad, gesture, events |

## Links

- npm: https://www.npmjs.com/package/embla-carousel-wheel-gestures
- Repository: https://github.com/xiel/embla-carousel-wheel-gestures
- Homepage: https://github.com/xiel/embla-carousel-wheel-gestures#readme
- Issues: https://github.com/xiel/embla-carousel-wheel-gestures/issues
- npm.io page: https://npm.io/package/embla-carousel-wheel-gestures

## Dependencies (1)

- [wheel-gestures](https://npm.io/package/wheel-gestures.md) ^2.2.5

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 8.1.0 (latest) — 2025-08-12
- 9.0.0-rc02 (next) — 2026-09-07
- 9.0.0-rc01 — 2026-04-02
- 8.0.5 — 2025-08-11
- 8.0.4 — 2025-08-11
- 8.0.3 — 2025-08-11
- 8.0.2 — 2025-04-03
- 8.0.1 — 2024-05-29
- 8.0.0-rc05 — 2023-09-30
- 8.0.0-rc04 — 2023-05-15
- 8.0.0-rc03 — 2023-05-10
- 3.0.0 — 2022-08-02
- 3.0.0-rc01 — 2022-07-06
- 2.2.0 — 2022-05-06
- 2.1.1 — 2022-03-18
- … 12 more at https://npm.io/package/embla-carousel-wheel-gestures/versions

## README

<p align="center">
  <a href="https://github.com/davidjerleke/embla-carousel" target="_blank"><img width="70" height="70" src="/assets/embla-logo.svg" alt="Embla Carousel"></a>
</p>
<h2 align="center">Wheel Gestures for Embla Carousel</h2>

<p align="center">
  This plugin adds wheel interactions to the amazing
  <a href="https://github.com/davidjerleke/embla-carousel">Embla Carousel</a>
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/embla-carousel-wheel-gestures" target="_blank">
    <img src="https://img.shields.io/npm/v/embla-carousel-wheel-gestures.svg"
  /></a>
  
  <img alt="NPM" src="https://img.shields.io/npm/l/embla-carousel-wheel-gestures">
  
  <a href="https://bundlephobia.com/result?p=embla-carousel-wheel-gestures@1.0.2" target="_blank">
    <img
      src="https://img.shields.io/bundlephobia/minzip/embla-carousel-wheel-gestures?color=%234c1&label=gzip%20size"
    />
  </a>
</p>

## Installation

First you need to follow the [installation instructions for Embla Carousel](https://github.com/davidcetinkaya/embla-carousel#installation), after that you can add wheel support:

```sh
yarn add embla-carousel-wheel-gestures # npm install --save embla-carousel-wheel-gestures
```

### JavaScript / TypeScript

```js
import EmblaCarousel from 'embla-carousel'
import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures'

// initialize Embla Carousel
const embla = EmblaCarousel(emblaNode, options, [
  WheelGesturesPlugin()
])
```

### React

```js
import { useEmblaCarousel } from 'embla-carousel-react'
import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures'

const EmblaCarouselComponent = ({ children }) => {
  const [emblaRef, embla] = useEmblaCarousel({ loop: false, skipSnaps: true }, [
    WheelGesturesPlugin(),
  ])

  // ...
}
```

## Examples

<p>Get started instantly with one of the CodeSandboxes below.</p>

<p>
  <img src="/assets/codesandbox.svg" height="23" align="top" /> &nbsp;
  <a href="https://codesandbox.io/s/github/xiel/embla-carousel-wheel-gestures/tree/master/docs/vanilla?file=/src/js/index.ts:1240-1266" target="_blank">
    <code>JavaScript / TypeScript</code>
  </a>
</p>

<p>
  <img src="/assets/codesandbox.svg" height="23" align="top" /> &nbsp;
  <a href="https://codesandbox.io/s/github/xiel/embla-carousel-wheel-gestures/tree/master/docs/react?file=/src/js/EmblaCarousel.tsx:879-942" target="_blank">
    <code>React (embla-carousel-react)</code>
  </a>
</p>

## Options

### wheelDraggingClass
**Type**: string<br/>
**Default**: is-wheel-dragging

Choose a classname that will be applied to the container during a wheel gesture. Pass an empty string to opt-out.


### forceWheelAxis
**Type**: 'x' | 'y'<br/>
**Default**: undefined

Force an axis on which to listen for wheel events. Useful if you want to slide horizontally when scrolling vertically or vice versa.


### target
**Type**: Element<br/>
**Default**: undefined

Specify the element that should be observed for wheel events.

## Global Options

You can also set global options that will be applied to all instances. This allows for overriding the default plugin options with your own:

```js
WheelGesturesPlugin.globalOptions = {
  wheelDraggingClass: 'my-class',
}
```

## OS & Browser Support

- Mac OS (Chrome, Firefox, Safari, Edge), Magic Mouse, Magic Trackpad
- Windows (Chrome, Firefox, Edge), Microsoft Precision Touchpads

#### Legacy Browsers

If you need to support IE 10 & 11 you might need to install and add extra polyfills:

```js
// Adds support old IE >= 10
import 'core-js/stable'
import 'events-polyfill/src/constructors/MouseEvent'
```

## Thanks

Kudos to [David Jerleke](https://github.com/davidjerleke) for creating [Embla Carousel](https://github.com/davidjerleke/embla-carousel) with its open API 🙏

## License

MIT.

---
_Source: https://npm.io/package/embla-carousel-wheel-gestures · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._