diff --git a/packages/embla-carousel-autoplay/src/components/Autoplay.ts b/packages/embla-carousel-autoplay/src/components/Autoplay.ts index 90f1629e0..1aef84581 100644 --- a/packages/embla-carousel-autoplay/src/components/Autoplay.ts +++ b/packages/embla-carousel-autoplay/src/components/Autoplay.ts @@ -9,11 +9,19 @@ declare module 'embla-carousel/components/Plugins' { } } +declare module 'embla-carousel/components/EventHandler' { + interface EmblaEventListType { + autoplayPlay: 'autoplay:play' + autoplayStop: 'autoplay:stop' + } +} + export type AutoplayType = CreatePluginType< { play: (jump?: boolean) => void stop: () => void reset: () => void + isPlaying: () => boolean }, OptionsType > @@ -23,15 +31,19 @@ export type AutoplayOptionsType = AutoplayType['options'] function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType { let options: OptionsType let emblaApi: EmblaCarouselType - let interaction: () => void - let timer = 0 + let destroyed: boolean + let playing = false + let wasPlaying = false let jump = false + let animationFrame = 0 + let timer = 0 function init( emblaApiInstance: EmblaCarouselType, optionsHandler: OptionsHandlerType ): void { emblaApi = emblaApiInstance + if (emblaApi.scrollSnapList().length <= 1) return const { mergeOptions, optionsAtMedia } = optionsHandler const optionsBase = mergeOptions(defaultOptions, Autoplay.globalOptions) @@ -39,68 +51,98 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType { options = optionsAtMedia(allOptions) jump = options.jump - interaction = options.stopOnInteraction ? destroy : stop + destroyed = false - const { eventStore, ownerDocument, ownerWindow } = emblaApi.internalEngine() + const { eventStore, ownerDocument } = emblaApi.internalEngine() const emblaRoot = emblaApi.rootNode() const root = (options.rootNode && options.rootNode(emblaRoot)) || emblaRoot - emblaApi.on('pointerDown', interaction) - if (!options.stopOnInteraction) emblaApi.on('pointerUp', reset) + emblaApi.on('pointerDown', clearTimer) + if (!options.stopOnInteraction) emblaApi.on('pointerUp', startTimer) if (options.stopOnMouseEnter) { - eventStore.add(root, 'mouseenter', interaction) - if (!options.stopOnInteraction) eventStore.add(root, 'mouseleave', reset) + eventStore.add(root, 'mouseenter', clearTimer) + + if (!options.stopOnInteraction) { + eventStore.add(root, 'mouseleave', startTimer) + } } eventStore.add(ownerDocument, 'visibilitychange', () => { - if (ownerDocument.visibilityState === 'hidden') return stop() - reset() - }) - eventStore.add(ownerWindow, 'pagehide', (event: PageTransitionEvent) => { - if (event.persisted) stop() + if (ownerDocument.visibilityState === 'hidden') { + wasPlaying = playing + return clearTimer() + } + + if (wasPlaying) startTimer() }) - if (options.playOnInit) play() + if (options.playOnInit) { + emblaApi.on('init', startTimer).on('reInit', startTimer) + } } function destroy(): void { - emblaApi.off('pointerDown', interaction) - if (!options.stopOnInteraction) emblaApi.off('pointerUp', reset) - stop() + destroyed = true + playing = false + emblaApi.off('init', startTimer).off('reInit', startTimer) + emblaApi.off('pointerDown', clearTimer) + if (!options.stopOnInteraction) emblaApi.off('pointerUp', startTimer) + clearTimer() + cancelAnimationFrame(animationFrame) + animationFrame = 0 + } + + function startTimer(): void { + if (destroyed) return + if (!playing) emblaApi.emit('autoplay:play') + const { ownerWindow } = emblaApi.internalEngine() + ownerWindow.clearInterval(timer) + timer = ownerWindow.setInterval(next, options.delay) + playing = true + } + + function clearTimer(): void { + if (destroyed) return + if (playing) emblaApi.emit('autoplay:stop') + const { ownerWindow } = emblaApi.internalEngine() + ownerWindow.clearInterval(timer) timer = 0 + playing = false } function play(jumpOverride?: boolean): void { - stop() if (typeof jumpOverride !== 'undefined') jump = jumpOverride - timer = window.setTimeout(next, options.delay) + startTimer() } function stop(): void { - if (!timer) return - window.clearTimeout(timer) + if (playing) clearTimer() } function reset(): void { - if (!timer) return - stop() - play() + if (playing) play() } - function next(): void { - const { index } = emblaApi.internalEngine() - const lastIndex = emblaApi.scrollSnapList().length - 1 - const kill = options.stopOnLastSnap && index.get() === lastIndex - - if (kill) return destroy() + function isPlaying(): boolean { + return playing + } - if (emblaApi.canScrollNext()) { - emblaApi.scrollNext(jump) - } else { - emblaApi.scrollTo(0, jump) - } - play() + function next(): void { + animationFrame = requestAnimationFrame(() => { + const { index } = emblaApi.internalEngine() + const nextIndex = index.clone().add(1).get() + const lastIndex = emblaApi.scrollSnapList().length - 1 + const kill = options.stopOnLastSnap && nextIndex === lastIndex + + if (kill) clearTimer() + + if (emblaApi.canScrollNext()) { + emblaApi.scrollNext(jump) + } else { + emblaApi.scrollTo(0, jump) + } + }) } const self: AutoplayType = { @@ -110,7 +152,8 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType { destroy, play, stop, - reset + reset, + isPlaying } return self } diff --git a/packages/embla-carousel-docs/src/content/pages/api/events.mdx b/packages/embla-carousel-docs/src/content/pages/api/events.mdx index 67418c937..d0491f9e4 100644 --- a/packages/embla-carousel-docs/src/content/pages/api/events.mdx +++ b/packages/embla-carousel-docs/src/content/pages/api/events.mdx @@ -12,6 +12,8 @@ import { TabsItem } from 'components/Tabs/TabsItem' Embla Carousel exposes **custom events** that can be hooked on to. Listening to events allows for extending the carousel. +--- + ## Usage You need an **initialized carousel** in order to **make use of events**. Events will only be fired during the lifecycle of a carousel and added event listeners will persist even when you hard reset the carousel with the [reInit](/api/methods/#reinit) method. diff --git a/packages/embla-carousel-docs/src/content/pages/api/methods.mdx b/packages/embla-carousel-docs/src/content/pages/api/methods.mdx index 1e7499b6e..7c2b4b2c3 100644 --- a/packages/embla-carousel-docs/src/content/pages/api/methods.mdx +++ b/packages/embla-carousel-docs/src/content/pages/api/methods.mdx @@ -12,6 +12,8 @@ import { TabsItem } from 'components/Tabs/TabsItem' Once a carousel is up and running, Embla Carousel exposes a set of **useful methods** which makes it very **extensible**. +--- + ## Usage You need an **initialized carousel** in order to **make use of methods**. They can be accessed during the lifecycle of a carousel and won't do anything after a carousel instance has been destroyed with the [destroy](/api/methods/#destroy) method. diff --git a/packages/embla-carousel-docs/src/content/pages/api/options.mdx b/packages/embla-carousel-docs/src/content/pages/api/options.mdx index 7a0dd0a91..79cf116d6 100644 --- a/packages/embla-carousel-docs/src/content/pages/api/options.mdx +++ b/packages/embla-carousel-docs/src/content/pages/api/options.mdx @@ -12,6 +12,8 @@ import { TabsItem } from 'components/Tabs/TabsItem' Embla Carousel takes various **options** in order to customize how the carousel works. You can provide options in two different ways. +--- + ## Usage You can customize Embla with the [constructor options](/api/options/#constructor-options) and/or [global options](/api/options/#global-options). If both are provided, they will be merged, and if any options are in conflict, the **constructor option** has precedence and will **override global options**. diff --git a/packages/embla-carousel-docs/src/content/pages/api/plugins.mdx b/packages/embla-carousel-docs/src/content/pages/api/plugins.mdx index fff23e512..45266de6f 100644 --- a/packages/embla-carousel-docs/src/content/pages/api/plugins.mdx +++ b/packages/embla-carousel-docs/src/content/pages/api/plugins.mdx @@ -12,6 +12,8 @@ import { TabsItem } from 'components/Tabs/TabsItem' It's possible to **extend** Embla carousel with additional features using **plugins**. The complete list of official plugins can be found [here](/plugins/). +--- + ## Usage The Embla Carousel **constructor** accepts an **array of plugins**. Each plugin has its own [options](/api/plugins/#constructor-options) and [methods](/api/plugins/#calling-methods). @@ -243,3 +245,82 @@ export const EmblaCarousel = () => { + +### Adding event listeners + +Some plugins fire their own **events**. Plugin events are structured as follows `:eventname`. [Adding](/api/events/#adding-event-listeners) and [removing](/api/events/#removing-event-listeners) plugin event listeners is done the same way as native Embla events. Here's an example where an event is added to the autoplay plugin: + + + + +```js{10} +import EmblaCarousel from 'embla-carousel' +import Autoplay from 'embla-carousel-autoplay' + +const emblaApi = EmblaCarousel(emblaNode, { loop: true }, [Autoplay()]) + +function logPluginEvent(emblaApi, eventName) { + console.log('Autoplay plugin stopped playing!') +} + +emblaApi.on('autoplay:stop', logPluginEvent) +``` + + + + +```jsx{15} +import { useEffect, useCallback } from 'react' +import useEmblaCarousel from 'embla-carousel-react' +import Autoplay from 'embla-carousel-autoplay' + +export function EmblaCarousel() { + const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [Autoplay()]) + + const logAutoplayStopEvent = useCallback(() => { + console.log('Autoplay plugin stopped playing!') + }, []) + + useEffect(() => { + if (!emblaApi) return + + emblaApi.on('autoplay:stop', logAutoplayStopEvent) // add + }, [emblaApi, logAutoplayStopEvent]) + + // ... +} +``` + + + + +```html{18} + +``` + + + diff --git a/packages/embla-carousel-docs/src/content/pages/examples/generator.mdx b/packages/embla-carousel-docs/src/content/pages/examples/generator.mdx index 2b41cbb4e..21d0cd571 100644 --- a/packages/embla-carousel-docs/src/content/pages/examples/generator.mdx +++ b/packages/embla-carousel-docs/src/content/pages/examples/generator.mdx @@ -31,6 +31,8 @@ Join the discussion here +--- + ## Choose framework diff --git a/packages/embla-carousel-docs/src/content/pages/examples/predefined.mdx b/packages/embla-carousel-docs/src/content/pages/examples/predefined.mdx index 5a1622c32..b7cd9d121 100644 --- a/packages/embla-carousel-docs/src/content/pages/examples/predefined.mdx +++ b/packages/embla-carousel-docs/src/content/pages/examples/predefined.mdx @@ -69,6 +69,8 @@ import { Get started instantly with pre-made CodeSandboxes. Do you want to customize your carousel more? Try the [carousel generator](/examples/generator). +--- + ## Basic Examples Basic carousel setups that require minimal effort to get started with. diff --git a/packages/embla-carousel-docs/src/content/pages/get-started/cdn.md b/packages/embla-carousel-docs/src/content/pages/get-started/cdn.mdx similarity index 99% rename from packages/embla-carousel-docs/src/content/pages/get-started/cdn.md rename to packages/embla-carousel-docs/src/content/pages/get-started/cdn.mdx index 94335c8b0..11a39ce31 100644 --- a/packages/embla-carousel-docs/src/content/pages/get-started/cdn.md +++ b/packages/embla-carousel-docs/src/content/pages/get-started/cdn.mdx @@ -13,6 +13,8 @@ Start by including the Embla Carousel script from a CDN with a `script` tag: ``` +--- + ## The HTML structure A minimal setup requires an **overflow wrapper** and a **scroll container**. Start by adding the following **HTML** structure to your carousel: diff --git a/packages/embla-carousel-docs/src/content/pages/get-started/module.mdx b/packages/embla-carousel-docs/src/content/pages/get-started/module.mdx index 046284d4e..ff6ae6dd6 100644 --- a/packages/embla-carousel-docs/src/content/pages/get-started/module.mdx +++ b/packages/embla-carousel-docs/src/content/pages/get-started/module.mdx @@ -29,6 +29,8 @@ Start by installing the **npm package** and save it to your dependencies: +--- + ## The HTML structure A minimal setup requires an **overflow wrapper** and a **scroll container**. Start by adding the following **HTML** structure to your carousel: diff --git a/packages/embla-carousel-docs/src/content/pages/get-started/react.mdx b/packages/embla-carousel-docs/src/content/pages/get-started/react.mdx index 32a97036e..0cf77d565 100644 --- a/packages/embla-carousel-docs/src/content/pages/get-started/react.mdx +++ b/packages/embla-carousel-docs/src/content/pages/get-started/react.mdx @@ -29,6 +29,8 @@ Start by installing the Embla Carousel **npm package** and add it to your depend +--- + ## The component structure Embla Carousel provides the handy `useEmblaCarousel` hook for seamless integration with React. A minimal setup requires an **overflow wrapper** and a **scroll container**. Start by adding the following structure to your carousel: diff --git a/packages/embla-carousel-docs/src/content/pages/get-started/svelte.mdx b/packages/embla-carousel-docs/src/content/pages/get-started/svelte.mdx index 4996a3793..153ab2434 100644 --- a/packages/embla-carousel-docs/src/content/pages/get-started/svelte.mdx +++ b/packages/embla-carousel-docs/src/content/pages/get-started/svelte.mdx @@ -29,6 +29,8 @@ Start by installing the Embla Carousel **npm package** and add it to your depend +--- + ## The component structure Embla Carousel provides the handy `emblaCarouselSvelte` action for seamless integration with Svelte. A minimal setup requires an **overflow wrapper** and a **scroll container**. Start by adding the following structure to your carousel: diff --git a/packages/embla-carousel-docs/src/content/pages/get-started/typescript.md b/packages/embla-carousel-docs/src/content/pages/get-started/typescript.md index d18f11e3c..e410214a8 100644 --- a/packages/embla-carousel-docs/src/content/pages/get-started/typescript.md +++ b/packages/embla-carousel-docs/src/content/pages/get-started/typescript.md @@ -14,6 +14,8 @@ Before continuing with this guide, make sure to setup a working carousel followi Embla Carousel and all its related packages are fully typed and has built-in type definitions, because they're written in TypeScript. +--- + ## Module usage The `embla-carousel` package exports a set of useful types that you can import like so: @@ -23,7 +25,7 @@ import EmblaCarousel, { EmblaCarouselType, EmblaOptionsType, EmblaPluginType, - EmblaEventType, + EmblaEventType } from 'embla-carousel' ``` @@ -37,7 +39,7 @@ function setupEmblaButtons(embla: EmblaCarouselType): void { } const emblaNodes: HTMLElement[] = Array.from( - document.querySelectorAll('.embla'), + document.querySelectorAll('.embla') ) emblaNodes.forEach((emblaNode) => { @@ -56,7 +58,7 @@ import useEmblaCarousel, { EmblaOptionsType, EmblaPluginType, EmblaEventType, - UseEmblaCarouselType, + UseEmblaCarouselType } from 'embla-carousel-react' ``` @@ -96,6 +98,6 @@ Plugins also export type definitions. Their type definitions are **prefixed** wi ```ts import Autoplay, { AutoplayType, - AutoplayOptionsType, + AutoplayOptionsType } from 'embla-carousel-autoplay' ``` diff --git a/packages/embla-carousel-docs/src/content/pages/get-started/vue.mdx b/packages/embla-carousel-docs/src/content/pages/get-started/vue.mdx index c426f2761..38db0fa61 100644 --- a/packages/embla-carousel-docs/src/content/pages/get-started/vue.mdx +++ b/packages/embla-carousel-docs/src/content/pages/get-started/vue.mdx @@ -29,6 +29,8 @@ Start by installing the Embla Carousel **npm package** and add it to your depend +--- + ## The component structure Embla Carousel provides the handy `emblaCarouselVue` function for seamless integration with Vue. A minimal setup requires an **overflow wrapper** and a **scroll container**. Start by adding the following structure to your carousel: @@ -51,7 +53,7 @@ Embla Carousel provides the handy `emblaCarouselVue` function for seamless integ setup() { const [emblaNode] = emblaCarouselVue() return { emblaNode } - }, + } } ``` diff --git a/packages/embla-carousel-docs/src/content/pages/guides/breakpoints.md b/packages/embla-carousel-docs/src/content/pages/guides/breakpoints.md index e79125880..9c52a9b3c 100644 --- a/packages/embla-carousel-docs/src/content/pages/guides/breakpoints.md +++ b/packages/embla-carousel-docs/src/content/pages/guides/breakpoints.md @@ -9,6 +9,8 @@ date: 2021-03-22 This guide demonstrates how to customize your carousels for different breakpoints using the [flexbox](/guides/slide-container/#using-flexbox) setup. Embla Carousel offers a convenient way to customize your carousels based on different breakpoints including changing [options](/api/options/), using plain CSS. +--- + ## Changing slide sizes Embla Carousel will **automatically pick up** any **changes in slide sizes** when the **window is resized**. It's a walk in the park to change slide sizes based on your breakpoints: @@ -49,8 +51,8 @@ Here's an example of a carousel that's only active when the screen width is less const options = { active: true, breakpoints: { - '(min-width: 768px)': { active: false }, - }, + '(min-width: 768px)': { active: false } + } } ``` @@ -59,8 +61,8 @@ Because the default [active](/api/options/#active) value is `true`, we can omit ```js const options = { breakpoints: { - '(min-width: 768px)': { active: false }, - }, + '(min-width: 768px)': { active: false } + } } ``` @@ -71,8 +73,8 @@ const options = { loop: false, breakpoints: { '(min-width: 768px)': { loop: true }, - '(min-width: 420px)': { loop: false }, // This will override the (min-width: 768px) breakpoint loop option - }, + '(min-width: 420px)': { loop: false } // This will override the (min-width: 768px) breakpoint loop option + } } ``` @@ -83,7 +85,7 @@ const options = { loop: false, // --> 419px screens and down will apply { loop: false } breakpoints: { '(min-width: 420px)': { align: 'start' }, // --> 420px screens and up will apply { align: 'start', loop: false } - '(min-width: 768px)': { loop: true }, // --> 768px screens and up will apply { align: 'start', loop: true } - }, + '(min-width: 768px)': { loop: true } // --> 768px screens and up will apply { align: 'start', loop: true } + } } ``` diff --git a/packages/embla-carousel-docs/src/content/pages/guides/previous-and-next-buttons.md b/packages/embla-carousel-docs/src/content/pages/guides/previous-and-next-buttons.md index f7e074c83..cc14556a5 100644 --- a/packages/embla-carousel-docs/src/content/pages/guides/previous-and-next-buttons.md +++ b/packages/embla-carousel-docs/src/content/pages/guides/previous-and-next-buttons.md @@ -12,6 +12,8 @@ This guide will show you **how** to **add previous and next buttons** using the - [scrollPrev](/api/methods/#scrollprev) - [scrollNext](/api/methods/#scrollnext) +--- + ## Button placement Assuming your carousel is [draggable](/api/options/#watchdrag), it's important to note that the **root node** will **respond to pointer events**. The root node is the one that is passed to the `EmblaCarousel` initializer. In the following example, it has the class name `embla`: diff --git a/packages/embla-carousel-docs/src/content/pages/guides/slide-container.md b/packages/embla-carousel-docs/src/content/pages/guides/slide-container.md index 2f18d656d..d42e942d2 100644 --- a/packages/embla-carousel-docs/src/content/pages/guides/slide-container.md +++ b/packages/embla-carousel-docs/src/content/pages/guides/slide-container.md @@ -9,6 +9,8 @@ date: 2021-03-13 Embla Carousel allows you to use **any CSS to stack your slides** in the chosen scroll [axis](/api/options/#axis), whether it's CSS Grid, flexbox, inline-blocks or anything else. This guide will show you **how to setup** your **slide container** with flexbox and CSS Grid. +--- + ## Using Flexbox With the minimal [HTML setup](/get-started/module/#the-html-structure) in place, we're going use flexbox to style our slide container. First, we need to stack our slides in our chosen scroll direction. This is an example of a container with slides stacked **horizontally**: diff --git a/packages/embla-carousel-docs/src/content/pages/guides/slide-gaps.md b/packages/embla-carousel-docs/src/content/pages/guides/slide-gaps.md index 5a8fd92e2..62d4dab9f 100644 --- a/packages/embla-carousel-docs/src/content/pages/guides/slide-gaps.md +++ b/packages/embla-carousel-docs/src/content/pages/guides/slide-gaps.md @@ -9,6 +9,8 @@ date: 2021-03-13 Embla Carousel allows you to use **any CSS to stack your slides** in the chosen scroll [axis](/api/options/#axis), whether it's CSS Grid, flexbox, inline-blocks or anything else. It will conveniently **pick up any spacings** between the slides and **automatically adjust the scroll snaps** accordingly. +--- + ## Declaring gaps It's recommended to declare gaps between slides **using CSS**. Any CSS that will render space between the slides is valid. You may add spacing in one direction like so: diff --git a/packages/embla-carousel-docs/src/content/pages/guides/slide-sizes.md b/packages/embla-carousel-docs/src/content/pages/guides/slide-sizes.md index cba6de403..894888628 100644 --- a/packages/embla-carousel-docs/src/content/pages/guides/slide-sizes.md +++ b/packages/embla-carousel-docs/src/content/pages/guides/slide-sizes.md @@ -15,6 +15,8 @@ If you haven't read about how to setup your slide [container](/guides/slide-cont +--- + ## Declaring sizes Slide sizes should in most cases be **declared with CSS**. Embla Carousel **supports any slide size out of the box**, and will pick up whatever size you've declared in your CSS. A very simple setup could look like this: diff --git a/packages/embla-carousel-docs/src/content/pages/plugins/autoplay.mdx b/packages/embla-carousel-docs/src/content/pages/plugins/autoplay.mdx index fbbe1e3db..fb8bf752c 100644 --- a/packages/embla-carousel-docs/src/content/pages/plugins/autoplay.mdx +++ b/packages/embla-carousel-docs/src/content/pages/plugins/autoplay.mdx @@ -16,6 +16,8 @@ import { TabsItem } from 'components/Tabs/TabsItem' 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: @@ -64,14 +66,16 @@ import Autoplay from 'embla-carousel-autoplay' const autoplayOptions = { delay: 4000, - rootNode: (emblaRoot) => emblaRoot.parentElement, + rootNode: (emblaRoot) => emblaRoot.parentElement } const embla = EmblaCarousel(emblaRoot, { loop: false }, [ - Autoplay(autoplayOptions), // Add plugin with options + Autoplay(autoplayOptions) // Add plugin with options ]) ``` +--- + ### delay Type: `number` @@ -79,6 +83,8 @@ Default: `4000` Delay between transitions in milliseconds. +--- + ### jump Type: `boolean` @@ -86,6 +92,8 @@ Default: `false` When set to true `true`, autoplay will do instant slide transitions when advancing. +--- + ### playOnInit Type: `boolean` @@ -93,6 +101,8 @@ Default: `true` If set to `false`, you'll have to start autoplay yourself by calling the [play](/plugins/autoplay/#play) method. +--- + ### stopOnInteraction Type: `boolean` @@ -100,6 +110,8 @@ 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` @@ -107,6 +119,8 @@ Default: `false` When enabled, autoplay will pause when a mouse pointer enters the Embla Carousel container. If [stopOnInteraction](/plugins/autoplay/#stoponinteraction) is also enabled, it will stop autoplay entirely instead of pausing it. +--- + ### stopOnLastSnap Type: `boolean` @@ -114,6 +128,8 @@ Default: `false` If this parameter is enabled, autoplay will be stopped when it reaches last slide. +--- + ### rootNode Type: `(emblaRoot: HTMLElement) => HTMLElement | null` @@ -129,6 +145,8 @@ The Autoplay plugin exposes a set of **useful methods** which lets you control i embla.plugins().autoplay.stop() // Method ``` +--- + ### play Parameters: `jump?: boolean` @@ -136,6 +154,8 @@ 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](/plugins/autoplay/#jump) option. +--- + ### stop Parameters: `none` @@ -143,9 +163,48 @@ Returns: `void` Stop autoplay. +--- + ### reset Parameters: `none` Returns: `void` -If [stopOnInteraction](/plugins/autoplay/#stoponinteraction) is set to `false`, this will restart the autoplay timer. If not, this method stops autoplay. +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 plugin events together with information about how they work. Attach event listeners like so: + +```ts +emblaApi.on('autoplay:play', (emblaApi, eventName) => { + console.log('Autoplay plugin started playing!') +}) +``` + +--- + +### autoplay:play + +Once: `no` + +Fires when autoplay starts playing. + +--- + +### autoplay:stop + +Once: `no` + +Fires when autoplay stops playing. + +---