Move slides with JavaScript
If you used any codes from the page in an earlier Smart Slider 3 version, you should replace them with the new codes in order to keep them working.
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:
Slide number | 1 | 2 | 3 | 4 | 5 |
Slide index | 0 | 1 | 2 | 3 | 4 |
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>