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
yarn add embla-carousel-autoplay
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.