ecw

embla-carousel-wheel-gestures

wheel interactions for Embla Carousel

Showing:

Popularity

Downloads/wk

4.1K

GitHub Stars

19

Maintenance

Last Commit

19d ago

Contributors

3

Package

Dependencies

1

Size (min+gzip)

2.6KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

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 { setupWheelGestures } from 'embla-carousel-wheel-gestures'

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

// add support for wheel events
setupWheelGestures(embla)

React

import { useEmblaCarousel } from 'embla-carousel-react'
import { setupWheelGestures } from 'embla-carousel-wheel-gestures'

const EmblaCarouselComponent = ({ children }) => {
  const [emblaRef, embla] = useEmblaCarousel({ loop: false })

  useEffect(() => embla && setupWheelGestures(embla), [embla])

  // ...
}

Examples

Get started instantly with one of the CodeSandboxes below.

  JavaScript / TypeScript

  React (embla-carousel-react)

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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial