xiel / embla-carousel-wheel-gestures

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, after that you can add wheel support:

yarn add embla-carousel-wheel-gestures # npm install --save embla-carousel-wheel-gestures

JavaScript / TypeScript

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

// initialize Embla Carousel
const embla = EmblaCarousel(emblaNode, options, [
  WheelGesturesPlugin()
])

React

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:

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:

// Adds support old IE >= 10
import 'core-js/stable'
import 'events-polyfill/src/constructors/MouseEvent'

Thanks

Kudos to David Jerleke for creating Embla Carousel with its open API 🙏

License

MIT.