wheel-gestures.mdx

title	description	order	date
Wheel Gestures	Learn how to add this Wheel Gesture plugin to Embla Carousel	5	2021-11-22

import { Tabs } from 'components/Tabs/Tabs' import { TabsItem } from 'components/Tabs/TabsItem' import { TABS_PACKAGE_MANAGER } from 'consts/tabs'

Wheel Gestures

View plugin on GitHub

This plugin is used to extend Embla Carousel with the ability to use the mouse/trackpad wheel to navigate the carousel.

---

Installation

First you need to install the npm package and save it to your dependencies:

```html
<script src="https://unpkg.com/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.umd.js"></script>
```

```shell
npm install embla-carousel-wheel-gestures --save
```

```shell
yarn add embla-carousel-wheel-gestures
```

Usage

This plugin accepts a single optional parameter, which is its options object that allows you to configure it.

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

const embla = EmblaCarousel(emblaRoot, { loop: false }, [WheelGesturesPlugin()]) // Add plugin

Options

Below follows an exhaustive list of all Wheel Gestures options and their default values.

---

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: string | undefined
Default: undefined

Force an axis on which to listen for wheel events. Choose scroll axis between x and y. 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.

---