Fancyapps

Slideshow ​

This built-in plugin seamlessly integrates the Carousel Autoplay plugin to provide slideshow functionality. Pauses while Fancybox content is loading and stops when user interacts.

Usage ​

Most of the time, the button provided by the Toolbar plugin to start and stop the slideshow will be enough for you. The slideshow can also be controlled by pressing a button on the keyboard - the space bar by default.

Here's how you can control the slideshow programmatically:

js
//** Step 1: Get a reference to a Fancybox instance
const fancybox = Fancybox.getInstance();

//** Step 2: Get a reference to a Carousel Autoplay plugin
const autoplay = fancybox.plugins.Slideshow.ref;
// or
const autoplay = fancybox.Carousel.plugins.Autoplay;

//** Step 3: Use any Carousel Autoplay API method, for example:

// Start autoplay
autoplay.start();

// Stop autoplay
autoplay.stop();

Options ​

Autoplay ​

Custom options for Carousel Autoplay plugin instance, see relevant documentation for more information

Type

Partial<AutoplayOptionsType>

Default

{}

key ​

Keyboard shortcut to toggle Slideshow

Type

string

Default

playOnStart ​

If the slideshow should automatically activate after Fancybox is launched

Type

boolean

Default

false

Example

https://jsfiddle.net/fnc0a53w/

progressParentEl ​

Change where progress bar is appended

Type

| HTMLElement
| null
| ((slideshow: Slideshow) => HTMLElement | null)

Default

js
progressParentEl: (slideshow) => {
  return (
    slideshow.instance.container?.querySelector(
      ".fancybox__toolbar [data-fancybox-toggle-slideshow]"
    ) || slideshow.instance.container
  );
};

Example

https://jsfiddle.net/fj40mth5/

timeout ​

Delay (in milliseconds) before the slide change

Type

number

Default

3000