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.