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

yarn add embla-carousel-autoplay

Options

Below follows an exhaustive list of all Autoplay options and their default values.

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 an interaction.

stopOnMouseEnter

Type: boolean
Default: false

When enabled, autoplay will stop when a mouse pointer enters the Embla Carousel container. If stopOnInteraction is also false, autoplay will resume when the mouse leaves the carousel container.

stopOnFocusIn

Type: boolean
Default: true

When enabled, autoplay will stop when a focusable element inside the carousel recieves focus. If stopOnInteraction is false, autoplay will resume when the user leaves focus.

stopOnLastSnap

Type: boolean
Default: false

If this parameter is enabled, autoplay will stop 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. 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

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

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

isPlaying

Parameters: none
Returns: boolean

Returns a boolean whether autoplay is playing or not.

Events

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

autoplay:play

Once: no

Fires when autoplay starts playing.

autoplay:stop

Once: no

Fires when autoplay stops playing.