Trigger JavaScript code based on slide switching

You can use our code to trigger a JavaScript code based on an event of the slider. Available events:

  • mainAnimationStart: when another slide starts to move in.
  • mainAnimationComplete: after another slide moved in.

Example

You will need your  slider's ID for these codes. You can find it next to your slider's name. In these examples the slider's ID will be 183.

Trigger some alerts
n2ss.ready(183, function(slider, sliderElement) {   
    sliderElement.on('mainAnimationStart', 
    function(e, animation, previousSlideIndex, currentSlideIndex) {     
        alert('Your slider starts to switch to another slide.');   
    });    
    sliderElement.on('mainAnimationComplete', 
    function(e, animation, previousSlideIndex, currentSlideIndex) {     
        alert('Your slider finished moving to the other slide.');   
    });
});
Move two different sliders at the same time

The other slider's ID will be 264 in this example.

n2ss.ready(183, function(slider, sliderElement) {
    n2ss.ready(264, function(slider2, sliderElement2) {
        sliderElement.on('mainAnimationStart', 
        function(e, animation, previousSlideIndex, currentSlideIndex) {
            slider2.slide(currentSlideIndex);
        });
    });
});
Move three different sliders at the same time
n2ss.ready(183, function(slider, sliderElement) {
    n2ss.ready(264, function(slider2, sliderElement2) {
        sliderElement.on('mainAnimationStart', 
        function(e, animation, previousSlideIndex, currentSlideIndex) {
            slider2.slide(currentSlideIndex);
        });
    });
    n2ss.ready(210, function(slider3, sliderElement3) {
        sliderElement.on('mainAnimationStart', 
        function(e, animation, previousSlideIndex, currentSlideIndex) {
            slider3.slide(currentSlideIndex);
        });
    });
});
You might need to put the codes above to $( document ).ready(function() {});