Auto Scroll

View plugin on GitHub

The Auto Scroll plugin extends Embla Carousel with smooth, continuous scrolling functionality.

Example

Installation

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

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

Options

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

active

Type:boolean
Default: true
{ active: false | true }

Setting this to false will not activate or deactivate the plugin. Useful when used together with the breakpoints option to toggle the plugin active/inactive depending on media queries.

breakpoints

Type:AutoScrollOptionsType
Default: {}
{   speed: 1,  '(min-width: 768px)': { speed: 2 }}

An object with options that will be applied for a given breakpoint by overriding the options at the root level.

Note: If multiple queries match, they will be merged. And when breakpoint options clash, the last one in the list has precedence.

speed

Type:number
Default: 2
{ speed: 2 }

Number of pixels auto scroll should advance per frame.

startDelay

Type:number
Default: 1000
{ startDelay: 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
{ direction: 'forward' | 'backward' }

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
{ playOnInit: true | false }

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

stopOnInteraction

Type:boolean
Default: true
{ stopOnInteraction: true | false }

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
{ stopOnMouseEnter: true | 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
{ stopOnFocusIn: true | false }

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
{ rootNode: null | (emblaRoot) => emblaRoot.parentElement }

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
emblaApi.plugins().autoScroll?.play(1000)

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
emblaApi.plugins().autoScroll?.stop()

Stops auto scroll.

reset

Parameters:none
Returns: void
emblaApi.plugins().autoScroll?.reset()

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
emblaApi.plugins().autoScroll?.isPlaying()

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

emblaApi.on('autoScroll:play', (emblaApi) => {})

Fires when auto scroll starts playing.

autoScroll:stop

emblaApi.on('autoScroll:stop', (emblaApi) => {})

Fires when auto scroll stops scrolling.

Edit this page on GitHub