Auto Scroll

This plugin is used to extend Embla Carousel with auto scroll functionality.

Example

Installation

Start by installing the npm package and save it to your dependencies:

<script src="https://unpkg.com/embla-carousel-auto-scroll/embla-carousel-auto-scroll.umd.js"></script>

npm install embla-carousel-auto-scroll --save

yarn add embla-carousel-auto-scroll

Options

Below follows an exhaustive list of all Auto Scroll options and their default values.

speed

Type: number
Default: 2

Number of pixels auto scroll should advance per frame.

startDelay

Type: number
Default: 1000

Number of milliseconds auto scroll should wait before it starts. This also applies when user interactions end and stopOnInteraction is false.

direction

Type: string
Default: forward

This option is used to set the auto scroll direction. Set it to backward if you want it to scroll in the opposite direction.

playOnInit

Type: boolean
Default: true

If set to false, you'll have to start auto scroll yourself by calling the play method.

stopOnInteraction

Type: boolean
Default: true

If set to false, auto scroll will not be disabled after drag interactions, and it will restart every time after an interaction.

stopOnMouseEnter

Type: boolean
Default: false

When enabled, auto scroll will stop when a mouse pointer enters the Embla Carousel container. If stopOnInteraction is also false, auto scroll will resume when the mouse leaves the carousel container.

stopOnFocusIn

Type: boolean
Default: true

When enabled, auto scroll will stop when a focusable element inside the carousel recieves focus. If stopOnInteraction is false, auto scroll will resume when the user leaves focus.

rootNode

Type: (emblaRoot: HTMLElement) => HTMLElement | null
Default: null

The node that should respond to user interactions like stopOnMouseEnter and stopOnInteraction. If this is omitted, the node that wraps the Embla Carousel will be used as default.

Methods

Below follows an exhaustive list of all Auto Scroll methods with their respective parameters and return values.

play

Parameters: startDelayOverride?: number
Returns: void

Start auto scroll. Pass a startDelayOverride if you want to change the startDelay option after the plugin has been initialized.

stop

Parameters: none
Returns: void

Stops auto scroll.

reset

Parameters: none
Returns: void

Stops auto scroll, and starts the timer again using startDelay when the carousel has settled. This will only take effect if auto scroll is playing. If auto scroll is stopped, this method won't trigger anything.

isPlaying

Parameters: none
Returns: boolean

Returns a boolean whether the carousel is auto scrolling or not.

Events

Below follows an exhaustive list of all Auto Scroll events together with information about how they work.

autoScroll:play

Once: no

Fires when auto scroll starts playing.

autoScroll:stop

Once: no

Fires when auto scroll stops scrolling.