Using the URL for slide switching

In this article

Using Slider Alias

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

  1. Turn on the Use as anchor 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/#alias-2

⚠️ The rest of the 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.

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 2 in '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

Using JavaScript

1
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

2
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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.