Events

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 this to retrieve references to the DOM elements, check their dimensions, and get a lot of other useful information.

const container = document.getElementById("myCarousel");
const options = {
  on: {
    change: (instance) => {
      // Current page
      const pageIndex = instance.getPageIndex();
      // Number of pages
      const pageCount = instance.getPages().length;
      // Current page slides
      const slides = instance.getPage().slides;
    },
  },
};

Carousel(container, options).init();

If you use * as the name of the event, you can listen to any event, here is an example:

Carousel(document.getElementById("myCarousel"), {
  on: {
    "*": (instance, eventName) => {
      console.log(`Carousel eventName: ${eventName}`);
    },
  },
}).init();

Available Events

Name	Description
*	Initialization has started
addSlide	New slide object is created
attachSlideEl	The element corresponding to the slide is added to the DOM
change	Active page of the carousel is changed
click	Click event has been detected
contentReady	Content is loaded on one of the slides
destroy	Instance is detroyed
detachSlideEl	The element corresponding to the slide is removed from the DOM
filter	Slides have been filtered
init	Initialization has started
initLayout	Layout is initialized
initPlugins	Plugins are initialized
initSlides	Slides are initialized
ready	Carousel has successfully launched
refresh	Carousel metrics have been updated
removeSlide	Slide object is removed
render	Slide DOM elements are placed in viewport
settle	The slide change animation has finished