Wheel Gestures

This plugin adds mouse and trackpad wheel support to Embla Carousel, allowing users to navigate slides using scroll gestures.

Installation

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

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

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

pnpm add embla-carousel-wheel-gestures

yarn add embla-carousel-wheel-gestures

Options

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

wheelDraggingClass

{ wheelDraggingClass: '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

{ forceWheelAxis: 'x' | 'y' }

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

{ target: document.querySelector('.embla__viewport') }

Specify the element that should be observed for wheel events.