Trigger JavaScript codes on slide switching

⚠️ This article was created for developers!

To be able to follow the steps, you're required to have coding knowledge. If you're not a developer and can't achieve what you're looking for, consider hiring a developer.

Make sure to carefully follow the tutorial and write correct code. We're unable to provide help with custom coding, or the possible issues that are happening because of them.

In this article

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.

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.

☝️ Note: You might need to put the codes above to jQuery( document ).ready(function() {});

Trigger a simple JavaScript alert()

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);
        });
    });
});

Check the next slide's index instead of the previous one

n2ss.ready(753, function(slider, sliderElement) {   
    sliderElement.on('mainAnimationStart', 
    function(e, animation, currentSlideIndex, nextSlideIndex) {     
        alert(nextSlideIndex);   
    });
});
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.