https://github.com/xiel/embla-carousel-wheel-gestures
wheel interactions for Embla Carousel
https://github.com/xiel/embla-carousel-wheel-gestures
gallery gestures react slider vanillajs wheel
Last synced: 4 months ago
JSON representation
wheel interactions for Embla Carousel
- Host: GitHub
- URL: https://github.com/xiel/embla-carousel-wheel-gestures
- Owner: xiel
- License: mit
- Created: 2020-06-10T18:48:37.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2025-10-20T19:56:59.000Z (9 months ago)
- Last Synced: 2025-11-01T09:02:53.410Z (9 months ago)
- Topics: gallery, gestures, react, slider, vanillajs, wheel
- Language: TypeScript
- Homepage: https://embla-carousel-wheel-gestures.xiel.dev/react.html
- Size: 1.99 MB
- Stars: 62
- Watchers: 3
- Forks: 9
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Wheel Gestures for Embla Carousel
This plugin adds wheel interactions to the amazing
Embla Carousel
## 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.
## 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.
