Zoomable
This plugin is used to display zoomable content in carousel slides. It creates a new instance of the Panzoom component for each slide, passes events, and manages the states of the slides and controls.
Basic example
Usage
Include corresponding JS and CSS files:
js
import { Zoomable } from "@fancyapps/ui/dist/carousel/carousel.zoomable.js";
import "@fancyapps/ui/dist/carousel/carousel.zoomable.css";Pass Zoomable to Carousel constructor or use plugins option.
js
const container = document.getElementById("myCarousel");
const options = {
// Your custom options
};
Carousel(container, options, { Zoomable }).init();Events
Zoomable adds additional events to the Carousel:
| Name | Description |
|---|---|
| panzoom:action | Action is being executed (for example, "zoomIn") |
| panzoom:animationEnd | Pointer up/cancel event detected |
| panzoom:animationStart | Pointer down event detected |
| panzoom:click | Single click event detected |
| panzoom:dblClick | Double click event detected |
| panzoom:render | Viewport CSS properties are updated |
| panzoom:wheel | Wheel event detected |
Options
Panzoom
Optional custom Panzoom options
Type
Partial<PanzoomOptions>
Default
undefined
tpl
HTML template for carousel slide content containing an image
Type
string | ((slide: CarouselSlide) => string)
Default
'<img class="f-panzoom__content" data-lazy-src="" alt="" />'
Methods
execute
Execute a Panzoom action on the current slide
Returns
void