embla-carousel-wheel-gestures

wheel gestures for embla carousel

Usage no npm install needed!

<script type="module">
  import emblaCarouselWheelGestures from 'https://cdn.skypack.dev/embla-carousel-wheel-gestures';
</script>

README

Embla Carousel

Wheel Gestures for Embla Carousel

This plugin adds wheel interactions to the amazing Embla Carousel

NPM

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.

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 Cetinkaya for creating Embla Carousel with its open API 🙏

License

MIT.