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.

_N2.r('#n2-ss-10', function(){
    var slider = _N2['#n2-ss-10'];

    //runs when the next slide starts to move in
    slider.sliderElement.addEventListener('mainAnimationStart', 
    function(e) {
        //e.detail.currentSlideIndex    contains the index of the new slide
        //e.detail.previousSlideIndex   contains the index of the previous
    });

    //runs when the next slide finished to moving in
    slider.sliderElement.addEventListener('mainAnimationComplete', 
    function(e) {
        //e.detail.currentSlideIndex    contains the index of the new slide
        //e.detail.previousSlideIndex   contains the index of the previous
    });
    
});

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 10.

Trigger a simple JavaScript alert()

_N2.r('#n2-ss-10', function(){
    var slider = _N2['#n2-ss-10'];
    slider.sliderElement.addEventListener('mainAnimationStart', 
    function(e) {
        alert('Your slider starts to switch to another slide.');
    });
    slider.sliderElement.addEventListener('mainAnimationComplete', 
    function(e) {
        alert('Your slider finished moving to the other slide.'); 
    });
});

Move two different sliders at the same time

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

e.detail.currentSlideInde contains the index of the slide the slider switched to.

_N2.r(['#n2-ss-10', '#n2-ss-2'], function(){
    var slider = _N2['#n2-ss-10'];
    slider.sliderElement.addEventListener('mainAnimationStart', 
    function(e) {
        var slider2 = _N2['#n2-ss-2'];
        slider2.slide(e.detail.currentSlideIndex);  
    });
});