KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #developer-tools #ai-agent #claude-code #codex #typescript #ai-agents #deepseek-harness #mcp #cli #rust

embla-carousel-wheel-gestures

★ 66 Open GitHub ↗

wheel interactions for Embla Carousel

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

<h2 align="center">Wheel Gestures for Embla Carousel</h2>

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

## 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 embla-carousel-wheel-gestures # npm install --save embla-carousel 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(),
  ])

// ...
}
```

With Embla Carousel v9, this plugin safely bails during SSR and attaches wheel listeners when the client hydrates.

## Examples

Get started instantly with one of the CodeSandboxes below.

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

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

## Options

### wheelDraggingClass
**Type**: string 
**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' 
**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 
**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.

embla-carousel-wheel-gestures

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README