FancyappsEvents
Carousel exposes custom events that can be hooked on to. To set event listeners, use the on option when initializing Carousel, or you can use the on() API method.
The first argument each listener receives is a reference to the current Carousel instance. Use it to get the active page index, get slides, retrieve DOM element references, and a lot of other useful information.
js
const container = document.getElementById("myCarousel");
const options = {
on: {
change: (instance) => {
// Current page
const page = instance.page;
// Page count
const pages = instance.pages.length;
// Current page slides
const slides = instance.pages[page].slides;
},
},
};
new Carousel(container, options);
If you use * as the name of the event, you can listen to any event, here is an example
js
new Carousel(document.getElementById("myCarousel"), {
on: {
"*": (carousel, eventName) => {
console.log(`Carousel eventName: ${eventName}`);
},
},
});
Available Events
| Name | Description |
|---|---|
| * | Any event |
Panzoom.* | Any Panzoom event |
init | Initialization has started, plugins have been added |
initLayout | The layout is initialized |
beforeInitSlide | Priority event when the slide object is created |
initSlide | The slide object is created |
destroySlide | The slide object is removed from the carousel |
initSlides | All slides have objects created |
createSlide | A corresponding DOM element is created for the slide |
removeSlide | The element corresponding to the slide is removed from the DOM |
selectSlide | Slide is marked as being on the active page |
unselectSlide | Slide is no longer on the active page |
ready | Initialization has been completed |
refresh | Carousel metrics have been updated |
beforeChange | Right before the active page of the carousel is changed |
change | The active page of the carousel is changed |
click | Single click event has been detected |
load | The image is lazy loaded |
settle | The slide change animation has finished |