Custom JavaScript

Just like with custom CSS, you need to assign a custom class to the slider and then use it in your custom code to target that specific slider.

The next chapter offers a presentation of the slider's JavaScript API, which allows you to programatically control the slider. Using this API requires some programming knowledge and familiarity with jQuery.

JavaScript API


The public methods below allow you to manipulate the slider using external controls. There are two ways of calling a public method.

The first way is by calling the sliderPro plugin and passing the name of the method and additional arguments:

$( '.my-slider' ).sliderPro( 'openSlide', 3 );

The first argument represents the name of the method and the second argument represents the value which will be applied. Please note that some methods don't have a second argument. For example:

$( '.my-slider' ).sliderPro( 'nextSlide' );

The second way is by getting a reference to the SliderPro instance and calling the method on the instance:

// get a reference to the SliderPro instance
var slider = $( '.my-slider' ).data( 'sliderPro' );

console.log( slider.getTotalSlides() );

slider.gotoPage( 2 );

Here is the list of available methods:

gotoSlide( index ) Scrolls to the slide at the specified index.
nextSlide() Scrolls the next slide.
previousSlide() Scrolls the previous slide.
getSlideAt( index ) Gets all the data of the slide at the specified index. Returns an object that contains all the data specified for that slide.
getSelectedSlide() Gets the index of the current slide.
update() This is called by the plugin automatically when a property is changed. You can call this manually in order to refresh the slider after changing its HTML, like removing or adding slides.
resize() This is called by the plugin automatically, when the browser window is resized. You can also call it manually if you find it necessary to have the slider resize itself.
getTotalSlides() Gets the total number of slides.
on( eventType, callback ) Adds an event listener to the slider. More details about the use of this method will be presented in the 'Callbacks' chapter.
off( eventType ) Removes an event listener from the slider.
destroy() Destroys a slider by removing all the visual elements and functionality added by the plugin. Basically, it leaves the slider in the state it was before the plugin was instantiated.


Callbacks (or events) are used to detect when certain actions take place. The callbacks can be added when the slider is instantiated, or at a later time.


$( '.my-slider' ).on( 'gotoSlide', function( event ) {
    console.log( event.index );

As you can notice, the callback functions have an event parameter which contains some information about that event.

The list of available events:

init Triggered after the slider was created.
update Triggered when the 'update' method is called, either automatically or manually.
gotoSlide Triggered when a slide is selected. Returned data:
  • index: the index of the selected slide
  • previousIndex: the index of the previously selected slide
gotoSlideComplete Triggered after the slider has scrolled to the new slide. Returned data:
  • index: the index of the selected slide
breakpointReach Triggered when a breakpoint is reached. Returned data:
  • size: the specified size that was reached
  • settings: the settings specified for the current size
videoPlay Triggered when a video starts playing.
videoPause Triggered when a video is paused.
videoEnd Triggered when a video ends.
showLayersComplete Triggered when all animated layers become visible.
hideLayersComplete Triggered when all animated layers become invisible.
thumbnailsUpdate Triggered when the thumbnails are updated.
gotoThumbnail Triggered when a new thumbnail is selected.
thumbnailsMoveComplete Triggered when the thumbnail scroller has moved.
Have more questions? Submit a request


Article is closed for comments.
Powered by Zendesk