embla-carousel-autoscroll v8.0.0-rc14

Installation

First you need to follow the installation instructions for Embla Carousel, after that you can add autoscroll support:

npm install --save embla-carousel-autoscroll  # yarn add embla-carousel-autoscroll

JavaScript / TypeScript

import EmblaCarousel from 'embla-carousel';
import AutoscrollPlugin from 'embla-carousel-autoscroll';

// initialize Embla Carousel
const embla = EmblaCarousel(emblaNode, {}, [
  AutoscrollPlugin({ stopOnFocusIn: true }),
]);

React

import { useEmblaCarousel } from 'embla-carousel-react';
import AutoscrollPlugin from 'embla-carousel-autoscroll';

const EmblaCarouselComponent = ({ children }) => {
  const [emblaRef, embla] = useEmblaCarousel({}, [
    AutoscrollPlugin({ stopOnFocusIn: true }),
  ]);

  // ...
};

Options

delay

Type: number Default: en-US

Locale to be used in IETF's BCP 47 format.

jump

Type: false | "off" | "polite" | "assertive" Default: false

Whether the screen reader should announce slide changes. Recommended to be turned off if autoscroll is used.

playOnInit

Type: number Default: 300

The debounce to use when updating aria properties.

stopOnFocusIn

Type: Function Default: (evt: HTMLElement, target: HTMLElement) => void

Whether the autoscroll stops if a slide or it's descendant receives focus.

stopOnInteraction

Type: Function Default: (evt: HTMLElement, target: HTMLElement) => void

Whether the autoscroll stops if the user interacts with the carousel.

stopOnMouseEnter

Type: Function Default: (evt: HTMLElement, target: HTMLElement) => void

Whether the autoscroll stops if the user hovers the carousel.

stopOnLastSnap

Type: Function Default: (evt: HTMLElement, target: HTMLElement) => void

Whether the autoscroll stops if the last snap point is reached.

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:

AutoscrollPlugin.globalOptions = {
  debounce: 1000,
};

OS & Browser Support

• Mac OS (Chrome, Firefox, Safari, Edge), Magic Mouse, Magic Trackpad
• Windows (Chrome, Firefox, Edge), Microsoft Precision Touchpads

Thanks

Kudos to David Jerleke for creating Embla Carousel with its open API 🙏

License

MIT.