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 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";
    var current_slide = jQuery("div"+slider_divid + " .n2-ss-slide").index("div"+slider_divid + " .n2-ss-slide.n2-ss-slide-active");
    jQuery(current_div).append(current_slide+1);
    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.

You could put this code without the <script> tags into the Slider settings → Other tab → 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