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

N2R('#n2-ss-1', function($, slider){slider.previous();});

Next Slide

N2R('#n2-ss-1', function($, slider){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 2.

N2R('#n2-ss-1', function($, slider){slider.slideToID(2);});

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

N2R('#n2-ss-1', function($, slider){slider.slideToID(2,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:

N2R('#n2-ss-1', function($, slider){slider.slide(0);});

Go to the 3rd slide:

N2R('#n2-ss-1', function($, slider){slider.slide(2);});

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

N2R('#n2-ss-1', function($, slider){slider.slide(2,0);});

Example with a simple button

<script>
    jQuery(document).ready(function(){
        jQuery('#button').click(function(e){
            e.preventDefault();
            N2R('#n2-ss-1', function($, slider){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.