Skip to main content

Events

Example#

Simple counter (demo):

const myCarousel = new Carousel(document.querySelector("#myCarousel"), {  Dots: false,  on: {    init: (carousel) => {      // Create references to DOM elements      carousel.$index = carousel.$container.querySelector(".carousel_index");      carousel.$count = carousel.$container.querySelector(".carousel_count");    },    refresh: (carousel) => {      // Update total count      if (carousel.$count) {        carousel.$count.innerHTML = carousel.pages.length;      }    },    change: (carousel) => {      // Update index of the current page      if (carousel.$index) {        carousel.$index.innerHTML = carousel.page + 1;      }    },  },});
NameDescription
initInitialization has started, plugins have been attached
refreshCarousel metrics have been updated
createSlideSlide has been created
selectSlideSlide is marked as being on the active page
unselectSlideSlide is no longer on the active page
removeSlideSlide has been removed from DOM
readyInitialization has been completed
settleCarousel sliding animation has ended