Move slides with JavaScript

⚠️ 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.

You can easily access some of the features of your slider through our JavaScript API. This API allows you to change to the next or previous slides, also to go to specific slides.

To access the API, the first thing you should do is to get the ID of your slider. For the tutorials, I'll use 10 as the slider ID.

Previous Slide

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

Next Slide

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

Go to a slide by its ID

First, grab the ID of the slide you want to switch to. My ID will be 22.

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

This function accepts a second parameter, which decides the direction. Use 1 to switch forward, and 0 to switch backwards.

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

Go to a slide by its index

Every slide is indexed by their order in the slider. The indexing starts from 0. Here's a basic example of the slide indexes:

Slide number	1	2	3	4	5
Slide index	0	1	2	3	4

Go to the 1st slide:

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

Go to the 3rd slide:

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

This function accepts a second parameter, which decides the direction. Use 1 to switch forward, and 0 to switch backwards.

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

Example with a simple button

<a id="button" href="#">Go to next slide</a>
<script>
    document.getElementById("button").addEventListener("click", mySliderActions); 
    function mySliderActions(){
        _N2.r('#n2-ss-10', function(){
            var slider = _N2['#n2-ss-10'];
            slider.next();
        });
    }
</script>

☝️ Note: If you would like to use the code multiple times on your page, you should use different class names each time, otherwise the last click function will override every other one!

Switch slides on page load

If you want to run slide switching codes on page load, you need to run the codes as a callback of the .ready() function. This function runs when the slider appears the first time, so you can ensure that the properties of the slider are ready.

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