Fancyapps

Toolbar ​

This plugin is used to extend the carousel with a toolbar containing various items. You can customize which items will be displayed using the included items and add new ones.

Since it is primarily useful for zoomable content, it is disabled by default if no zoomable content is found on any carousel slide. If you want it to always be enabled, set the enabled:true option.

Examples ​

Basic example ​

Image #1
Image #2
Image #3
Image #4
Image #5
Image #6
Image #7
Image #8
Image #9

All available items ​

This example shows all available items. Additional items may be available through carousel plugins.

Image #1
Image #2
Image #3
Image #4
Image #5
Image #6
Image #7
Image #8
Image #9

Additional items ​

This example shows additional items available through carousel plugins.

1
2
3
4
5
6
7

Usage ​

Include corresponding JS and CSS files:

js
import { Toolbar } from "@fancyapps/ui/dist/carousel/carousel.toolbar.js";
import "@fancyapps/ui/dist/carousel/carousel.toolbar.css";

Pass Toolbar to Carousel constructor or use plugins option.

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

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

Options ​

absolute ​

If absolutely position container

Type

boolean

Default

false

display ​

What toolbar items to display

Type

Partial<Record<ToolbarColumn, Array<ToolbarKey | ToolbarItem>>>

Default

js
{
  left: [],
  middle: [
    "zoomIn",
    "zoomOut",
    "toggle1to1",
    "rotateCCW",
    "rotateCW",
    "flipX",
    "flipY",
    "reset",
  ],
  right: [],
}

enabled ​

If enabled; "auto" - enable only if there is at least one panzoom instance in the carousel

Type

"auto" | boolean

Default

"auto"

items ​

Collection of toolbar items that add new or overwrite existing items

Type

Partial<typeof allToolbarItems>

Default

{}

Methods ​

add ​

Register new toolbar item

Parameters

id: string, item: ToolbarItem

Returns

void

Note

ts
type ToolbarItem = {
  tpl: string;
  click?: (instance: CarouselInstance, event: Event) => void;
};

isEnabled ​

Check if toolbar is enabled

Returns

boolean