What is an event?

Events are certain moments in the plugin execution time, such when the slider is loaded, when the slides change or when the slider is being resized which allow us to extend our slider’s functionality and allow us to use the currently active slider element.

The load event

The load event is triggered when the slider is loaded, meaning all the images are fully visible and loaded in the browser cache. Until the slider is loaded, a loading spinner is displayed.

To add a function to the load event, we will use the following event handler:

$('.slidea').on('slidea.load', function (event) {
  console.log('Slidea has been loaded.')
});

The transition event

The transition event occurs when the slide action happens. You can add custom functionality to the slider by accessing the current slide and having details about the total number of slides, the next, previous and current slide.

To add a function to the transition event, we will use the following event handler:

$('.slidea').on('slidea.transition', function (event, from, to, prev, next, max, element) {
  console.log(
      'Slidea from: ' + from,
      'Slidea to: ' + to,
      'Slidea prev: ' + prev,
      'Slidea next: ' + next,
      'Slidea max: ' + max,
      'Slidea element: ' + element
  );
});

The pause event

The pause event occurs when the slider’s autoplay function is paused. This event requires autoplay to be set to true. The slider can be paused manually, or by the video API or by the pauseOnHover option.

$('.slidea').on('slidea.pause', function (event) {
  console.log('Slidea has been paused.')
});

The resume event

The pause event occurs when the slider’s autoplay function is unpaused. This event requires autoplay to be set to true. The slider can be paused manually, or by the video API or by the pauseOnHover option.

$('.slidea').on('slidea.resume', function (event) {
  console.log('Slidea has been resumed.')
});

The resize event

The resize event is triggered whenever the browser window has been resized. This is useful to access the window height and width directly from the slider without further computation.

To add a function to the resize event, we will use the following event handler:

$('.slidea').on('slidea.resize', function (event, width, height, handler) {
  console.log('Slidea has been resized.', 'Slidea width: ' + width, 'Slidea height: ' + height, 'Responsive size handler: ' + handlder);
});

The loop event

The loop event is triggered when Slidea reaches the end of the slides and starts a new iteration of the loop if the loop parameter is enabled in the settings.

To add a function to the loop event, we will use the following event handler:

$('.slidea').on('slidea.loop', function (event) {
  console.log('Slidea has reached the end of the slideshow.');
});

Dynamic add events

In Slidea, the dynamic adding of elements such as slides, layers and objects will all trigger an event containing information about the newly added element.

To add a function to the addSlide event, we will use the following event handler:

$('.slidea').on('slidea.addSlide', function (event, index, slide) {
  console.log('Slide with index ' + index + ' has been added.', slide);
});

For the addLayer event, we will use the following event handler:

$('.slidea').on('slidea.addLayer', function (event, slideIndex, layerIndex, layer) {
  console.log('Layer with index ' + layerIndex +
              ' has been added to slide with index ' + slideIndex + '.', layer);
});

The addObject event will trigger the following event format:

$('.slidea').on('slidea.addObject', function (event, slideIndex, objectIndex, object) {
  console.log('Object with index ' + objectIndex +
              ' has been added to slide with index ' + slideIndex + '.', object);
});