Move slides with JavaScript

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.

In the examples the slider's ID will be 183.

Previous slide

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

Next slide

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

Go to a slide by its ID

If you want to navigate to a slide by its ID, you can find out the ID looking at the URL, when you are at the slide editor of that slide: http://example.com/wp-admin/admin.php?page=nextend-smart-slider-3&nextendcontroller=slides&nextendaction=edit&sliderid=183& slideid=23

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

If you are using Simple or Carousel slider type, then you can add the direction as the second parameter. 1 is forward, 0 is backward:

N2R('#n2-ss-183', function($, slider){slider.slideToID(23, 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's indexes:

Go to the 1st slide:

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

Go to the 3rd slide:

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

If you are using Simple or Carousel slider type, then you can add the direction as the second parameter. 1 is forward, 0 is backward:

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

Example with a text button:

<div class="switch">Switch to the 2nd slide</div>
<script>
N2R('#n2-ss-183', function($, slider){
    jQuery('.switch').click(function(){
        slider.slide(1);
    });
});
</script>