Auto Scroll

The Auto Scroll plugin enables you to create carousels with continuous, non-stop motion. This is ideal for tickers, marathons, or any scenario where you want a fluid, automated scrolling effect rather than a snap-to-slide behavior.

Installation

First, install the Auto Scroll package via your preferred package manager:

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

yarn add embla-carousel-auto-scroll

pnpm add embla-carousel-auto-scroll

Basic Usage

To use Auto Scroll, you need to import the plugin and pass it to the Embla Carousel constructor. Note that for a seamless experience, it is highly recommended to set the loop option to true.

Vanilla JS

import EmblaCarousel from 'embla-carousel'
import AutoScroll from 'embla-carousel-auto-scroll'

const emblaNode = document.querySelector('.embla')
const viewportNode = emblaNode.querySelector('.embla__viewport')

const emblaApi = EmblaCarousel(viewportNode, { loop: true }, [
  AutoScroll({ speed: 1 })
])

React

import React from 'react'
import useEmblaCarousel from 'embla-carousel-react'
import AutoScroll from 'embla-carousel-auto-scroll'

export function EmblaCarousel() {
  const [emblaRef] = useEmblaCarousel({ loop: true }, [
    AutoScroll({ playOnInit: true })
  ])

  return (
    <div className="embla" ref={emblaRef}>
      <div className="embla__container">
        <div className="embla__slide">Slide 1</div>
        <div className="embla__slide">Slide 2</div>
        <div className="embla__slide">Slide 3</div>
      </div>
    </div>
  )
}

Configuration

The AutoScroll plugin accepts an options object to customize its behavior.

Options

| Option | Type | Default | Description | | :--- | :--- | :--- | :--- | | speed | number | 2 | The scroll speed. Higher values increase speed. | | direction | 'forward' \| 'backward' | 'forward' | The direction in which the carousel scrolls. | | playOnInit | boolean | true | Automatically start scrolling when the carousel initializes. | | stopOnInteraction | boolean | true | Stops scrolling when the user interacts (drag, click, focus) with the carousel. | | stopOnMouseEnter | boolean | false | Stops scrolling when the mouse pointer enters the carousel viewport. | | stopOnLastSnap | boolean | false | If loop is false, stops scrolling when reaching the last snap point. | | rootNode | (emblaRoot: HTMLElement) => HTMLElement | null | A function that returns the node to attach event listeners to. Defaults to the Embla root node. |

API Methods

The Auto Scroll plugin exposes a set of methods that can be accessed via emblaApi.plugins().autoScroll.

play(speed?: number)

Starts the auto scroll motion. If a speed is provided, it overrides the initial configuration.

emblaApi.plugins().autoScroll.play()

stop()

Immediately halts the auto scroll motion.

emblaApi.plugins().autoScroll.stop()

isPlaying()

Returns a boolean indicating whether the carousel is currently auto-scrolling.

const isScrolling = emblaApi.plugins().autoScroll.isPlaying()

Global Options

You can set global options for all Auto Scroll instances by using the globalOptions property. This is useful if you want all tickers across your application to share the same behavior.

import AutoScroll from 'embla-carousel-auto-scroll'

AutoScroll.globalOptions = {
  speed: 1,
  stopOnMouseEnter: true
}

Troubleshooting

Loop Requirement

For a truly "endless" ticker effect, ensure that the core Embla option { loop: true } is enabled. Without looping, the auto-scroll will hit the end of the container and stop (unless stopOnLastSnap is specifically managed).

Interaction Conflicts

By default, stopOnInteraction is enabled. If you find your ticker stops unexpectedly, check if your CSS or JS is triggering focus or click events on the carousel slides.