README.md

Autoscroll for Embla Carousel

This plugin extends the native autoscroll plugin of the amazing Embla Carousel

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.