Wheel Gestures
This plugin is used to extend Embla Carousel with the ability to use the mouse/trackpad wheel to navigate through the carousel.
Installation
First you need to install the npm package and save it to your dependencies:
npm install embla-carousel-wheel-gestures --save
Alternatively, you can use a CDN to include it in your project:
<script src="https://unpkg.com/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.umd.js"></script>
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
The Wheel Gestures plugin accepts an optional options object as the first argument. Here's an example of how to make use of it:
import EmblaCarousel from 'embla-carousel'
import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures'
const wheelGesturesOptions = {
wheelDraggingClass: 'my-wheel-class',
}
const embla = EmblaCarousel(emblaRoot, { loop: false }, [
WheelGesturesPlugin(wheelGesturesOptions), // Add plugin with 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: 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.