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-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
Get started instantly with one of the CodeSandboxes below.
JavaScript / TypeScript
React (embla-carousel-react)
## 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.