Auto Scroll

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:

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

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

pnpm add embla-carousel-auto-scroll

yarn add embla-carousel-auto-scroll

emblaApi.plugins().autoScroll?.play()

Options

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

active

{ 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

{   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.

speed

{ speed: 2 }

Number of pixels auto scroll should advance per frame.

startDelay

{ startDelay: 1000 }

Number of milliseconds auto scroll should wait before it starts.

direction

{ 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.

defaultInteraction

{ defaultInteraction: true | false }

When set to true, auto scroll follows Embla Carousel's default interaction behavior — it stops when the user interacts with the carousel (for example, on focus or pointer down). Set this to false if you want to handle interactions manually using the autoScroll:interaction event.

rootNode

{ rootNode: null | (emblaRoot) => emblaRoot.parentElement }

The node that should respond to mouseenter and mouseleave events. 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

emblaApi.plugins().autoScroll?.play(true | false)

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

stop

emblaApi.plugins().autoScroll?.stop()

Stops auto scroll.

reset

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

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.

autoscroll:interaction

emblaApi.on('autoscroll:interaction', (emblaApi, event) => {  const { interaction, originalEvent, isMouseOver, isPointerDown } = event.detail})

The event fires on different user interactions with the carousel. Use this event to customize how auto scroll should respond to user interactions. The isMouseOver and isPointerDown properties indicate the current state of the mouse and pointer interactions.