Custom JavaScript code

There aren't many times when you need to use custom JavaScript. However, if you need this advanced option, the slider provides a simple method to add the custom code. In the 'Custom CSS & JavaScript' sidebar panel you will need to specify a unique identifier in the 'Custom Class' field, check the 'Enable custom JS' option, and then insert the code by clicking on the 'Edit custom JS' link. A .js file containing that code will be created in /plugins/slider-pro/custom/slider-pro-ID/slider-pro-ID-js.js, where 'ID' is the actual ID of the slider.

When you want to use custom JavaScript code, you also need to know a few things about the slider's JavaScript API. Slider PRO is built on Advanced Slider, a jQuery slider plugin, and Advanced Slider provides several methods/functions and callback function/events that allow you to manipulate the slider.

Public Methods

The public methods allow you to manipulate the slider using external controls. This is a very useful capability if you want to integrate the slider with other applications or elements from the page.

Method NameDescription
nextSlide() Opens the next slide.
previousSlide() Opens the previous slide.
gotoSlide(index) Opens the slide at the specified index.
startSlideshow() Starts the slideshow mode.
stopSlideshow() Stops the slideshow mode.
pauseSlideshow() Pauses the slideshow.
resumeSlideshow() Resumes the slideshow.
scrollToThumbnailPage() Moves the thumbnail scroller to the specified page.
scrollToNextThumbnailPage() Moves the thumbnail scroller to the next page.
scrollToPreviousThumbnailPage() Moves the thumbnail scroller to the previous page.
startThumbnailMouseScroll() Starts the mouse scrolling functionality.
stopThumbnailMouseScroll() Stops the mouse scrolling functionality.
startThumbnailMouseWheel() Starts the mouse wheel functionality.
stopThumbnailMouseWheel() Stops the mouse wheel functionality.
doSliderLayout() Forces the slider to re-position all elements. The position of the elements depends on the specified width, height, scaleType and alignType.
getSlideshowState() Gets the current slideshow state. Returns 'playing', 'paused' or 'stopped'.
getCurrentIndex() Gets the index of the current 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.
getTriggerType() Returns a string that indicates what triggered the slider to navigate to a different slide. Possible values are: 'none', 'previousButton', 'nextButton', 'button', 'slideshow' and 'thumbnail'.
isTransition() Checks if the slider is in the transition phase. Returns true or false.
totalSlides() Returns the total number of slides.
getSize() Returns an object that contains the width and height of both the slider and the slide. The returned object has the following properties: sliderWidth, sliderHeight, slideWidth and slideHeight.
destroy() Stops all running actions. It's recommended to call this method before removing the slider from the DOM.

When you want to call one of these action you need to use the unique identifier you set in the custom class field:

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

Callbacks

The callbacks, or events, are useful for detecting when certain actions take place. For example, we can detect when a transition is complete or when a slide was clicked. Below is a list of all the available callbacks.

Callback NameDescription
sliderInit Triggered after the slider was instantiated.
transitionStart Triggered when a transition starts.
transitionComplete Triggered when a transition is complete.
slideClick Triggered when a slide is clicked.
slideMouseOver Triggered when the mouse is rolled over a slide.
slideMouseOut Triggered when the mouse is rolled out of a slide.
thumbnailClick Triggered when a thumbnail is clicked.
thumbnailMouseOver Triggered when the mouse is rolled over a thumbnail.
thumbnailMouseOut Triggered when the mouse is rolled out of a thumbnail.
videoPlay Triggered when a video starts playing.
videoPause Triggered when a video is paused.
videoEnd Triggered when a video ends.
videoFullscreenChange Triggered when the fullscreen state of a video changes.
xmlLoaded Triggered when the XML file is completely loaded.
doSliderLayout Triggered when the layout is modified.

Most of these callback functions will return an object that contains certain information. The slide related callbacks, for example, will contain information about the slide that triggered the event. The information contained is the index of the slide (0, 2, 5, etc.), the type of event (slideClick, transitionComplete, etc.) and a 'data' object that contains all the slide's information that was specified for that slide. You can use a callback function as you see in the example below:

jQuery(document).ready(function($) {
    $('.my-slider').advancedSlider().settings.transitionComplete = function(obj) {
        console.log('You are viewing slide ' + obj.index);
        console.log(obj.type, obj.data);
    };
     
     
    $('.my-slider').advancedSlider().settings.doSliderLayout = function(obj) {
        console.log($('.my-slider').advancedSlider().getSize());
    };
});

NOTE: In order to add custom JavaScript code, the 'custom' folder (/wp-content/plugins/slider-pro/custom) needs to be writable. On some servers this means that the folder has to have the permission set to 755, but on other servers it has to have the permission set to 777. I recommend checking with your webhost what the best permission setting for making the folder writable would be.

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk