Events and Methods

Zoro Slider supports integration in three main ways:

1. frontend runtime events emitted by the slider
2. builder-configured layer actions such as custom events and callback functions
3. public runtime methods you can call from your theme, plugin, or page scripts

This page documents both the public frontend API exposed by the slider runtime and the layer-side integration patterns you can test immediately. For the full layer-side setup of custom events, callback functions, and advanced actions, also see Layer Options.

Frontend Runtime Events

The frontend slider runtime emits zoroslider:* events that you can listen to from your page scripts.

Lifecycle events

• zoroslider:init
• zoroslider:ready
• zoroslider:destroy
• zoroslider:error

Slide navigation events

• zoroslider:before-slide-change
• zoroslider:slide-change-start
• zoroslider:slide-change
• zoroslider:slide-change-end
• zoroslider:slide-change-cancel
• zoroslider:after-slide-change

Autoplay events

• zoroslider:autoplay-start
• zoroslider:autoplay-stop
• zoroslider:autoplay-pause
• zoroslider:autoplay-resume
• zoroslider:autoplay-progress
• zoroslider:autoplay-complete

Interaction events

• zoroslider:next
• zoroslider:previous
• zoroslider:slide-to
• zoroslider:swipe
• zoroslider:keyboard-navigation
• zoroslider:control-click
• zoroslider:dot-click
• zoroslider:thumb-click

Layer events

• zoroslider:layer-before-in
• zoroslider:layer-after-in
• zoroslider:layer-before-out
• zoroslider:layer-after-out
• zoroslider:layer-click
• zoroslider:layer-show
• zoroslider:layer-hide

Transition events

• zoroslider:transition-start
• zoroslider:transition-end
• zoroslider:transition-cancel

Responsive events

• zoroslider:resize
• zoroslider:layout-change
• zoroslider:device-change

Carousel events

• zoroslider:carousel-move
• zoroslider:carousel-moved
• zoroslider:carousel-item-click

Media events

• zoroslider:media-ready
• zoroslider:media-play
• zoroslider:media-playing
• zoroslider:media-pause
• zoroslider:media-ended
• zoroslider:media-time-update
• zoroslider:media-seeked
• zoroslider:media-volume-change
• zoroslider:media-error

Video-specific events

• zoroslider:video-ready
• zoroslider:video-play
• zoroslider:video-playing
• zoroslider:video-pause
• zoroslider:video-ended
• zoroslider:video-volume-change
• zoroslider:video-enter-fullscreen
• zoroslider:video-exit-fullscreen
• zoroslider:video-error

Audio-specific events

• zoroslider:audio-ready
• zoroslider:audio-play
• zoroslider:audio-playing
• zoroslider:audio-pause
• zoroslider:audio-ended
• zoroslider:audio-volume-change
• zoroslider:audio-error

Listening for runtime events

Example 1: Using jQuery

jQuery('#my-slider').on('zoroslider:after-slide-change', function (e, detail) {
  console.log(detail && detail.currentIndex);
});

Example 1: Using Vanilla JavaScript

document
  .getElementById('my-slider')
  .addEventListener('zoroslider:after-slide-change', function (e) {
    const detail = e.detail;
    console.log(detail && detail.currentIndex);
  });

Example 2: Using jQuery

$('#my-slider').on('zoroslider:after-slide-change', (e) => {
  const detail = e.originalEvent.detail;
  console.log(detail.currentIndex);
});

Example 2: Using Vanilla JavaScript

const slider = document.getElementById('my-slider');

slider.addEventListener('zoroslider:after-slide-change', (e) => {
  const detail = e.detail;
  console.log(detail.currentIndex);
});

Depending on the event source, detail may also be available through the event object. If you are wiring up custom logic, inspect the event once in the browser console first.

Public Runtime Methods

The runtime stores a public API handle on the slider element as zorosliderapi.

Example Using jQuery

const api = jQuery('#my-slider').data('zorosliderapi');

Example Using Vanilla JavaScript

const api = document.getElementById('my-slider').dataset.zorosliderapi;

Navigation methods

• next()
• previous()
• goTo(index)
• goToFirst()
• goToLast()

State and slide information methods

• getCurrentIndex()
• getPreviousIndex()
• getSlideCount()
• getCurrentSlide()
• getSlide(index)
• isAnimating()
• isPaused()
• isAutoplayEnabled()

Autoplay methods

• startAutoplay()
• pauseAutoplay()
• resumeAutoplay()
• stopAutoplay()
• restartAutoplay()

Slider lifecycle and layout methods

• destroy()
• refresh()
• update()
• refreshLayout()
• setLayout(layout)
• getLayout()
• getDevice()

Layer methods

• showLayer(layer)
• hideLayer(layer)
• toggleLayer(layer)
• removeLayer(layer)
• addLayer(configOrElement)
• animateLayerIn(layer, delay)
• animateLayerOut(layer, delay)
• toggleLayerAnimation(layer, inDelay, outDelay)
• triggerLayerClick(layer)

Media methods

• playMedia(selectorOrLayer)
• pauseMedia(selectorOrLayer)
• stopMedia(selectorOrLayer)
• muteMedia(selectorOrLayer)
• unmuteMedia(selectorOrLayer)
• setMediaVolume(selectorOrLayer, volume)

Scrolling methods

• scrollToSliderTop(offset)
• scrollToSliderBottom(offset)
• scrollToPageTop(offset)
• scrollToPageBottom(offset)
• scrollToElement(element, offset)

Options and API access methods

• getOption(name)
• setOption(name, value)
• getOptions()
• getSlides()
• getApi()

Public method example

Example Using jQuery

const api = jQuery('#my-slider').data('zorosliderapi');

if (api) {
  api.goTo(3);
  api.pauseAutoplay();
}

Example Using Vanilla JavaScript

const slider = document.getElementById('my-slider');
const api = slider.dataset.zorosliderapi;

if (api && typeof api.goTo === 'function' && typeof api.pauseAutoplay === 'function') {
  api.goTo(3);
  api.pauseAutoplay();
}

Recommended Integration Order

If you are adding custom behavior to a slider, use this order:

1. build the slider and save it
2. assign a stable layer ID in the layer settings
3. configure the layer action in the builder
4. test it on preview
5. test it again on the frontend page where the slider is embedded

This helps you separate builder configuration problems from theme or frontend script problems.

Layer Custom Events

The most reliable event-driven integration path is the layer Custom Event action.

In the builder:

1. select a layer
2. open Layer Settings
3. go to the Advanced area
4. add an action row
5. set Event to Custom Event
6. enter an Event Name such as promoOpen
7. choose the action behavior you want to trigger

jQuery trigger example

jQuery('#your-layer-id').trigger('promoOpen');

jQuery button-to-layer example

jQuery(function ($) {
  $('#open-promo-button').on('click', function () {
    $('#your-layer-id').trigger('promoOpen');
  });
});

Vanilla JavaScript trigger example

document
  .getElementById('your-layer-id')
  .dispatchEvent(new Event('promoOpen', { bubbles: true }));

Vanilla JavaScript button-to-layer example

document.addEventListener('DOMContentLoaded', function () {
  const button = document.getElementById('open-promo-button');
  const layer = document.getElementById('your-layer-id');

  if (!button || !layer) {
    return;
  }

  button.addEventListener('click', function () {
    layer.dispatchEvent(new Event('promoOpen', { bubbles: true }));
  });
});

Callback Function Actions

Zoro Slider supports callback-driven actions from the layer action settings. Use them when a layer event should call custom JavaScript in your site.

Inline Callback Type

Use Inline when the callback logic is short and specific to one slider interaction.

Example builder values:

• Callback Type: Inline
• Callback Function:

console.log('Inline callback fired for layer action');
document.body.classList.add('promo-open');

Use inline callbacks for quick tests and one-off UI reactions. For reusable site logic, use External instead.

External Callback Type

Use External when you want to call a named function that already exists in your site JavaScript.

Example builder values:

• Callback Type: External
• Callback Name: myZoroLayerCallback
• Callback Args: "hello", 2, true, "#target-block"

Then define the function on the page:

function myZoroLayerCallback(message, count, enabled, selector) {
  console.log(message, count, enabled, selector);

  const target = document.querySelector(selector);

  if (enabled && target) {
    target.classList.add('is-active');
  }
}

When to use External instead of Inline

Prefer External when:

• the same logic is used by multiple sliders
• the callback is longer than a few lines
• the code needs version control in your theme or plugin
• another developer needs to maintain the behavior later

Runtime Access Patterns

After a slider is embedded on a page, you may also add your own UI around it, such as custom buttons, page-level navigation, or helper scripts.

Common examples include:

• open a modal or panel when a layer is clicked
• jump to a specific slide from a custom page button
• pause or resume slider behavior from external UI
• sync page elements with slider state

The standard runtime handle is:

jQuery('#my-slider').data('zorosliderapi');

Even so, you should still verify the handle in the browser console before depending on it in production code, especially if the page has multiple sliders.

Safe Runtime Testing Workflow

Use this workflow before documenting or shipping a custom integration:

1. embed the slider on a normal page using the shortcode or PHP snippet
2. open browser developer tools
3. confirm the target slider element and layer IDs exist
4. test the custom event with a manual trigger
5. test the callback output in the console
6. only then connect external page controls

Embedding Matters

Preview and frontend rendering can differ if you test unsaved builder changes or if your theme adds its own styling around slider elements.

For final integration testing:

1. save the slider first
2. embed it on a normal WordPress page
3. test both the visual result and the event or callback behavior there

If you need help embedding the slider first, see Publishing and Shortcodes.

Related Pages

• Getting Started
• Builder Workspace
• Layer Options
• Publishing and Shortcodes