Autoplay

This plugin is used to extend Embla Carousel with autoplay functionality.

Example

Installation

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

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

npm install embla-carousel-autoplay --save

pnpm add embla-carousel-autoplay

yarn add embla-carousel-autoplay

emblaApi.plugins().autoplay?.play()

Options

Below follows an exhaustive list of all Autoplay 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

{   delay: 4000,  '(min-width: 768px)': { delay: 2000 }}

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

delay

{ delay: 4000 | (snapList) => snapList.map((_, index) => index * 1000) }

Choose a delay between transitions in milliseconds. If you pass a number, the same delay will be applied to all transitions. If you pass a function, you can return an array of numbers based on the snapList parameter and set different delays for each scroll snap.

instant

{ instant: true | false }

When set to true true, autoplay will do instant slide transitions (no animation) when advancing.

defaultInteraction

{ defaultInteraction: true | false }

When set to true, autoplay 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 autoplay:interaction event.

stopOnLastSnap

{ stopOnLastSnap: true | false }

If this parameter is enabled, autoplay will stop when it reaches the last scroll snap.

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 Autoplay methods with their respective parameters and return values.

play

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

Start autoplay. Set the instant parameter to true when you want autoplay to do instant slide transitions when advancing. Please note that providing a value to this method vill override the instant option.

stop

emblaApi.plugins().autoplay?.stop()

Stops autoplay and clears the timer.

reset

emblaApi.plugins().autoplay?.reset()

Resets the timer and starts over. This will only take effect if autoplay is already active. If autoplay is stopped, this method won't do anything.

pause

emblaApi.plugins().autoplay?.pause()

Pauses autoplay by storing the time left to the next automatic scroll. Use the play method to resume autoplay from where it was paused.

isPlaying

emblaApi.plugins().autoplay?.isPlaying()

Returns a boolean indicating whether autoplay is currently active. When playing, the autoplay timer is running and will advance the carousel to the next snap after the set delay, continuing to do so until stopped.

timeUntilNext

emblaApi.plugins().autoplay?.timeUntilNext()

If the autoplay timer is active, this will return a number representing the time left until the autoplay scrolls to the next snap. If the timer is not active, this will return null. Use this together with the autoplay:timerset and autoplay:timerstopped events to create a custom progress bar for autoplay.

Events

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

autoplay:play

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

Fires when autoplay starts playing. When this event is triggered, the autoplay timer is active, and autoplay will select the next scroll snap and start scrolling to it when the delay has passed.

autoplay:stop

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

Fires when autoplay stops playing. When this event is triggered, the autoplay timer is not active anymore.

autoplay:select

emblaApi.on('autoplay:select', (emblaApi, event) => {  const { targetSnap, sourceSnap } = event.detail})

Fires directly after autoplay selects the next scroll snap target and just before it starts scrolling to it.

autoplay:timerset

emblaApi.on('autoplay:timerset', (emblaApi, event) => {  const { startTime } = event.detail})

Fires when the autoplay timer is set. As soon as the timer is set, countdown to autoplay to the next scroll snap will begin.

autoplay:timerstopped

emblaApi.on('autoplay:timerstopped', (emblaApi, event) => {  const { stopTime } = event.detail})

Fires when the autoplay timer is stopped.

autoplay:interaction

emblaApi.on('autoplay: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 autoplay should respond to user interactions. The isMouseOver and isPointerDown properties indicate the current state of the mouse and pointer interactions.