embla-carousel-wheel-gestures
v8.1.0TypeScript
wheel gestures for embla carousel
0/weekUpdated 6 months agoMITUnpacked: 147.1 KB
Published by Felix Leupold
npm install 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:
``sh`
yarn add embla-carousel-wheel-gestures # npm install --save embla-carousel-wheel-gestures
$3
`js
import EmblaCarousel from 'embla-carousel'
import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures'
// initialize Embla Carousel
const embla = EmblaCarousel(emblaNode, options, [
WheelGesturesPlugin()
])
`
$3
`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(),
])
// ...
}
`
Examples
Get started instantly with one of the CodeSandboxes below.
Options
$3
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.
$3
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.
$3
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:
`js`
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:
`js``
// 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.