Navigate to a slide with the url

1

Using Slider Alias

At the General settings of your slider you can set a slider alias, which you can use for navigation.

  1. Turn on the "Use as ID on element before slider" feature. This creates an element with an ID right before the slider to let #alias anchor links point to this slider.
  2. Turn on "Allow slide switching for anchor"
  3. Publish your slider

You'll be able to go to your slider's second slide using a link like this: https://yoursite.com/page/#slider-2

2

Using PHP

With this code, you will be able to go to a page, where is a slider, and make that slider go to a specific slide depending on the link.

Put this code into your theme right before the </head>:

<?php
if(isset($_GET["slide"])){
	$slide = $_GET["slide"];
} else {
	$slide = 0;
}
?>
<script type="text/javascript">
window['ss2'] = <?php echo $slide; ?>;
</script>
	

The number in the 'ss2' is your slider's id.

After this you can make the slider to go to a specific slide, if you put a ?slide=1, or other number into the end of your link. This code will get out this number, and when your page loads, the slider will switch to that slide. For example if your slider is here: http://example.com/home/, then with this link, you can make it go to the 2nd slide: http://example.com/home/?slide=1

3

Using JavaScript only

A

Navigate according to the slide number

Put this code into your slider's Slider settings > Developer tab:

N2R("$", function ($) {
    function getUrlVars() {
        var vars = {};
        var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
            vars[key] = value;
        });
        return vars;
    }
    var go_to_slide_number = getUrlVars()["slide"];
    if (typeof go_to_slide_number !== "undefined") {
        var sliderid = 6; /* REPLACE THIS WITH YOUR OWN SLIDER ID!!! */
        window["ss"+sliderid] = parseInt(go_to_slide_number) - 1;
    }
});
		

Then modify the sliderid variable to your slider's id.

After this you can make the slider to go to a specific slide, if you put a ?slide=2, or other number into the end of your link. This code will get out this number, and when your page loads, the slider will switch to that slide. For example if your slider is here: http://example.com/home/, then with this link, you can make it go to the 2nd slide: http://example.com/home/?slide=2

B

Navigate according to the real Slide ID

Put this code into your slider's Slider settings > Developer tab:

N2R("$", function($, slider) {
    function getUrlVars() {
        var vars = {};
        var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {
            vars[key] = value;
        });
        return vars;
    }

    var sliderid = 6,  /* REPLACE THIS WITH YOUR OWN SLIDER ID!!! */
    n2ss.ready(sliderid, function(slider) {
        slider.visible(function() {
            var go_to_slide_number = parseInt(getUrlVars()["slide"]);
            if (typeof go_to_slide_number !== "undefined") {
                slider.slideToID(go_to_slide_number);
            }
        });
    });
});
		

Then modify the sliderid variable to your slider's id.

Similar to the method you saw above, if you put a ?slide=305, or other number into the end of your link, can make the slider to go to the slide which real Slide ID is 305, if the slider contains that slide. You can find out what is the real Slide ID of a slide during slide editing, if you inspect the URL.