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 1 as the slider ID.

In this article

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

<script>
    document.getElementById("button").addEventListener("click", mySliderActions); 
    function mySliderActions(){
        _N2.r('#n2-ss-10', function(){
            var slider = _N2['#n2-ss-10'];
            slider.next();
        });
    }
</script>
<a id="button" href="#">Go to next slide</a>
☝️ 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!
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.