Skip to content
On this page

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