Dynamic slide counter

With this, you can display the current slide number and the slide count in your slider.

Put this code into your theme's header.php file or your template's index.php file:

<script type="text/javascript">
jQuery(document).ready(function(){
    var sliderid = 2;
    var current_slide = 1;
    var slider_divid = "#n2-ss-"+sliderid;
    var slide_count = jQuery("div"+slider_divid + " .n2-ss-slide").length;
    var current_div = slider_divid + " .n2-ss-counter-current";
    var all_div = slider_divid + " .n2-ss-counter-all";
    jQuery(current_div).append(current_slide);
    jQuery(all_div).append(slide_count);

    n2ss.ready(sliderid, function(slider, sliderElement) {   
        sliderElement.on('mainAnimationStart', 
        function(e, animation, previousSlideIndex, currentSlideIndex) {
            jQuery(current_div).empty();   
            jQuery(current_div).append(currentSlideIndex + 1);
        });
        sliderElement.on('mainAnimationComplete', 
        function(e, animation, previousSlideIndex, currentSlideIndex) {
            jQuery(current_div).empty();   
            jQuery(current_div).append(currentSlideIndex + 1);
        });
    });
});
</script>

Change the sliderid variable to your slider id and the current_slide to your starting slide number.  (E.g. if your slider starts at the 3rd slide, write 3 there.)

You could put this code without the <script> tags into the Slider settings → Developer → JavaScript callbacks, or if you have the Pro version, into the HTML control with the <script> tags.

Then create a static slide so it will appear on all of your slides, and put down a text layer, and put this codes inside:

<span class="n2-ss-counter-current"></span> of <span class="n2-ss-counter-all"></span>

You are free to add any texts and custom content outside of the span tags, and you can customize them using our font and style manager.

If you would like to have different fonts or styles to the numbers, you can put the <span> tags into different text layers.

See it in action