Support Center

Slider API Methods

Slider API methods can be used to control sliders behavior.

  • (integer):
    Initiate a slide change to the specified slide number. The count starts from 1. The example on the right side shows how to switch to the third slide.
    Ex: $('#slider').layerSlider(3);
     
  • nextSlide or next:
    Skips to the next slide in the sequence.
    Ex: $('#slider').layerSlider('next');
     
  • previousSlide or prev:
    Changes to the previous slide.
    Ex: $('#slider').layerSlider('prev');
     
  • replaySlide or replay:
    Restarts the slide, replays all layer transitions from the beginning.
    Ex: $('#slider').layerSlider('replay');
     
  • reverseSlide or reverse:
    Play the slide and all transitions backwards, then pause at the beginning of the slide. Pass true as a second parameter to continue replaying the slider normally afterward.
    Ex: $('#slider').layerSlider('reverse', true);
     
  • resetSlide:
    Immediately sets the current slide back to its starting state and pauses it.
    Ex: $('#slider').layerSlider('resetSlide');
     
  • stopSlideshow or stop:
    Stops the slideshow. Depending on the pauseLayers setting, the slide animation timeline may still continue its progress towards the end of slide. This means that layer transitions and progress timers may not be interrupted, but the slider will not commence to the next slide until resuming the slideshow.
    Ex: $('#slider').layerSlider('stop');
     
  • startSlideshow or start:
    Resumes the slideshow and re-enables the slider to change slides when reaching the end of animation timeline. Since transitions may occur even in a paused state depending on the pauseLayers setting, it possible that the timeline has already reached its end point when calling this command.
    Ex: $('#slider').layerSlider('start');
     
  • pauseSlider or pause:
    Stops the slider by freezing every animation taking place at the time of execution, including slide transitions when changing slides.
    Ex: $('#slider').layerSlider('pause');
     
  • resumeSlider or resume:
    Resumes the slider and continues playing frozen animations.
    Ex: $('#slider').layerSlider('resume');
     
  • toggleSlider or toggle:
    Toggles between pauseSlider and resumeSlider by respecting the current state.
    Ex: $('#slider').layerSlider('toggle');
     
  • openPopup:
    Opens initialized Popups waiting in the background to be launched.
    Ex: $('#slider').layerSlider('openPopup');
     
  • closePopup:
    Closes the Popup.
    Ex: $('#slider').layerSlider('closePopup');
     
  • data:
    Returns the entire data object that the slider uses.
    Ex: var data = $('#slider').layerSlider('data');
     
  • eventData:
    Returns the Event Data object filled with the relevant values at the time of execution.
    Ex: var data = $('#slider').layerSlider('eventData');
     
  • userInitOptions:
    Returns the slider options provided by the user in the init code.
    Ex: var data = $('#slider').layerSlider('userInitOptions');
     
  • defaultInitOptions:
    Returns the full list of the default slider options.
    Ex: var data = $('#slider').layerSlider('defaultInitOptions');
     
  • sliderInitOptions:
    Returns the parsed slider options (extended by user data) used to initialize the slider.
    Ex: var data = $('#slider').layerSlider('sliderInitOptions');
     
  • originalMarkup:
    Returns the original HTML markup that the slider was initialized on.
    Ex: var data = $('#slider').layerSlider('originalMarkup');
     
  • redrawSlider or redraw:
    Recalculates the slider styles and repaints the slider. Useful when you want to manually trigger responsive calculations to update the slider UI.
    Ex: $('#slider').layerSlider('redraw');
     

Note: Please do inspect (ctrl+Shift+I) to get ID of the slider as like below image.

Inspect slider

Glad we could be helpful. Thanks for the feedback.

Sorry we couldn't be helpful. Your feedback will help us improve this article.

How helpful was this page?

  
Updated on Tue, 09 Jul 2019 by Ashish Pachori

In this section