Fancyapps

Expand ​

This plugin provides functionality to expand the carousel to fill the screen. When expanded, it adds a keyboard listener and exits the expanded state when the user presses the Esc key.

This also adds a button to the Toolbar plugin, but you can create your own trigger element by adding the data-expand-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: ["expand"],
    },
  },
};
1
2
3
4
5

Usage ​

Include corresponding JS and CSS files:

js
import { Expand } from "@fancyapps/ui/dist/carousel/carousel.expand.js";
import "@fancyapps/ui/dist/carousel/carousel.expand.css";

Pass Expand to Carousel constructor or use plugins option.

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

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

This plugin provides toggle() method that you can use to manually change state of Expand. Example of usage:

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

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

Options ​

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 element for which the CSS class will be managed

Type

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

Default

undefined

Methods ​

toggle ​

Set expanded state or exit if already expanded

Returns

void