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:

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

Move three different sliders at the same time

_N2.r(['#n2-ss-10', '#n2-ss-2', '#n2-ss-3'], function(){
    var slider = _N2['#n2-ss-10'];
    slider.sliderElement.addEventListener('mainAnimationStart', 
    function(e) {
        var slider2 = _N2['#n2-ss-2'];
        slider2.slide(e.detail.currentSlideIndex);  
        var slider3 = _N2['#n2-ss-3'];
        slider3.slide(e.detail.currentSlideIndex);  
    });
});
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.