Fancyapps

Fullscreen ​

This plugin provides functionality to present Carousel in fullscreen mode. When fullscreen mode is active, it adds a keyboard listener and exits fullscreen when the user presses the Esc key.

If full screenmode is available, the plugin will add a button to the Toolbar plugin. You can also create your own trigger element by adding the data-fullscreen-action="toggle" attribute.

Basic example ​

Note that Toolbar is disabled by default if no zoomable content is found on any slide, so this example adds enabled: true:

js
const options = {
  Toolbar: {
    absolute: true,
    enabled: true,
    display: {
      right: ["fullscreen"],
    },
  },
};
1
2
3
4
5

Usage ​

Include corresponding JS and CSS files:

js
import { Fullscreen } from "@fancyapps/ui/dist/carousel/carousel.fullscreen.js";
import "@fancyapps/ui/dist/carousel/carousel.fullscreen.css";

Pass Fullscreen to Carousel constructor or use plugins option.

js
const container = document.getElementById("myCarousel");
const options = {
  // Your custom options
};

Carousel(container, options, { Fullscreen }).init();

This plugin provides several methods that you can use to manually change state of Fullscreen. Example of usage:

js
// Get reference to the Carousel instance
const myCarousel = Carousel(container, options, { Fullscreen }).init();

// Call plugin method
myCarousel.getPlugins().Fullscreen?.toggle();

Options ​

autoStart ​

If the carousel should be set to full screen automatically after initialization

Type

boolean

Default

true

btnTpl ​

Toolbar button template

Type

string

Default

'<button data-expand-action="toggle" class="f-button" title="{{TOGGLE_EXPAND}}"><svg><g><path d="M14.5 9.5 21 3m0 0h-6m6 0v6M3 21l6.5-6.5M3 21v-6m0 6h6"/></g><g><path d="m14 10 7-7m-7 7h6m-6 0V4M3 21l7-7m0 0v6m0-6H4"/></g></svg></button>'

el ​

Optional custom element to present in fullscreen mode

Type

HTMLElement | ((ref: CarouselInstance) => HTMLElement | undefined | null)

Default

undefined

Methods ​

exit ​

Request that an element in this document that is currently displayed in fullscreen mode be removed from fullscreen mode

Returns

Promise<void> | undefined

inFullscreen ​

Check if fullscreen mode is set

Returns

boolean

request ​

Ask the user agent to place the specified element into fullscreen mode

Returns

Promise<void> | undefined

toggle ​

Set fullscreen mode or exit if already set

Returns

void