Autoplay

This plugin is used to extend Embla Carousel with autoplay functionality. It comes with a useful set of options that allows you to customize it to your liking.

Installation

First you need to install the npm package and save it to your dependencies:

npm install embla-carousel-autoplay --save

Alternatively, you can use a CDN to include it in your project:

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

Usage

This plugin accepts two optional parameters. The first parameter is the autoplay options object that allows you to configure it. The second parameter allows you to choose a custom root node for the autoplay plugin. If this parameter is omitted, the Embla Carousel root node will be used as a default.

import EmblaCarousel from 'embla-carousel'
import Autoplay from 'embla-carousel-autoplay'

const options = { delay: 4000 } // Options
const autoplayRoot = (emblaRoot) => emblaRoot.parentElement // Root node
const autoplay = Autoplay(options, autoplayRoot)

const embla = EmblaCarousel(emblaRoot, { loop: false }, [autoplay]) // Add plugin

Options

The Autoplay plugin accepts an optional options object as the first argument. Here's an example of how to make use of it:

import Autoplay from 'embla-carousel-autoplay'

const options = { delay: 4000 }
const autoplay = Autoplay(options)

delay

Type: number
Default: 4000

Delay between transitions in milliseconds.

jump

Type: boolean
Default: false

When set to true true, autoplay will do instant slide transitions when advancing.

playOnInit

Type: boolean
Default: true

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

stopOnInteraction

Type: boolean
Default: true

If set to false, autoplay will not be disabled after drag interactions, and it will restart every time after the interaction.

stopOnMouseEnter

Type: boolean
Default: false

When enabled, autoplay will pause when a mouse pointer enters the Embla Carousel container. If stopOnInteraction is also enabled, it will stop autoplay entirely instead of pausing it.

stopOnLastSnap

Type: boolean
Default: false

If this parameter is enabled, autoplay will be stopped when it reaches last slide.

Methods

The Autoplay plugin exposes a set of useful methods which lets you control it. Assuming you've passed the plugin to the Embla Carousel constructor, a method is called like demonstrated below:

embla.plugins().autoplay.stop() // Method

play

Parameters: jump?: boolean
Returns: void

Start autoplay. Set the jump 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 jump option.

stop

Parameters: none
Returns: void

Stop autoplay.

reset

Parameters: none
Returns: void

If stopOnInteraction is set to false, this will restart the autoplay timer. If not, this method stops autoplay.