README
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.
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.