Fancyapps
Return to top
On this page

Autoplay

This plugin is used to automatically change the active page after a certain period of time. Optionally displays a progress bar to indicate remaining time.

Examples

Basic example

1
2
3
4
5

JSFiddle Example

Usage

Include corresponding JS and CSS files:

js
import { Autoplay } from "@fancyapps/ui/dist/carousel/carousel.autoplay.esm.js";
import "@fancyapps/ui/dist/carousel/carousel.autoplay.css";

Pass plugin to the constructor.

js
const container = document.getElementById("myCarousel");
const options = {
  Autoplay: {
    timeout: 3000,
  },
};

new Carousel(container, options, { Autoplay });

The autoplay plugin exposes a useful set of methods to control it. Assuming you have passed the plugin to the carousel constructor, the method is called as shown below:

js
fc.plugins().Autoplay.stop();

Options

autoStart

If autoplay should start automatically after initialization

Type

boolean

Default

true

on

Optional event listeners

Type

Record<AutoplayEventsType, (...args: any[]) => void>

Default

{}

Note

js
type AutoplayEventsType = "set" | "pause" | "resume" | "stop";

pauseOnHover

If autoplay should pause when the user hovers over the container

Type

boolean

Default

true

progressParentEl

Change where progress bar is appended

Type

HTMLElement | null | (() => HTMLElement | null)

Default

null

Example

https://jsfiddle.net/2epd5kvf/

showProgress

If element should be created to display the autoplay progress

Type

boolean

Default

true

timeout

Delay (in milliseconds) before the slide change

Type

number

Default

3000

Methods

start

Start autoplay

Returns

void

stop

Stop autoplay

Returns

void

pause

Pause autoplay if active

Returns

void

resume

Resume previously paused autoplay

Returns

void

toggle

Stops the previously active autoplay or starts a new one

Returns

void