wheel gestures for embla carousel
npm install embla-carousel-wheel-gestures
This plugin adds wheel interactions to the amazing
Embla Carousel
/>
src="https://img.shields.io/bundlephobia/minzip/embla-carousel-wheel-gestures?color=%234c1&label=gzip%20size"
/>
First you need to follow the installation instructions for Embla Carousel, after that you can add wheel support:
``sh`
yarn add embla-carousel-wheel-gestures # npm install --save embla-carousel-wheel-gestures
`js
import EmblaCarousel from 'embla-carousel'
import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures'
// initialize Embla Carousel
const embla = EmblaCarousel(emblaNode, options, [
WheelGesturesPlugin()
])
`
`js
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(),
])
// ...
}
`
Get started instantly with one of the CodeSandboxes below.
Choose a classname that will be applied to the container during a wheel gesture. Pass an empty string to opt-out.
Force an axis on which to listen for wheel events. Useful if you want to slide horizontally when scrolling vertically or vice versa.
Specify the element that should be observed for wheel events.
You can also set global options that will be applied to all instances. This allows for overriding the default plugin options with your own:
`js`
WheelGesturesPlugin.globalOptions = {
wheelDraggingClass: 'my-class',
}
- 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:
`js``
// Adds support old IE >= 10
import 'core-js/stable'
import 'events-polyfill/src/constructors/MouseEvent'
Kudos to David Jerleke for creating Embla Carousel with its open API 🙏
MIT.