Autoplay

View plugin on GitHub

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 a single optional parameter, which is its options object that allows you to configure it. You maybe want to choose a custom root node for the autoplay plugin. This can be done with the rootNode options attribute. The root node will respond to interaction events and stop autoplay when a user interacts with the carousel. If this attribute 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 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 EmblaCarousel from 'embla-carousel'import Autoplay from 'embla-carousel-autoplay'
const autoplayOptions = {  delay: 4000,  rootNode: (emblaRoot) => emblaRoot.parentElement,}
const embla = EmblaCarousel(emblaRoot, { loop: false }, [  Autoplay(autoplayOptions), // Add plugin with 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.

rootNode

Type: (emblaRoot: HTMLElement) => HTMLElement | null
Default: null

The node that should respond to user interactions like stopOnMouseEnter and stopOnInteraction.

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.

Edit this page on GitHub