Showing Slide Count With Nivo Slider

I would like to show the slide count as 2 of 10 on my slider. How do I make it work with the transitions 3 of 10, 4 of 10 (as the slider moves with slides) & 7 of 10 (if the co

Solution 1:

You can have the current slide no as current_slide_no = jQuery('#nivo-slider').data('nivo:vars').currentSlide; Add 1 to it as index starts from 0.

Use afterChange attribute to change the current slide number while initializing the NIVO slider.

So, I got it working by

<scripttype="text/javascript">jQuery(document).ready(function(){
        var total = jQuery('#nivo-slider img').length;
        var current_slide_no = 1; // garbage// var rand = Math.floor(Math.random()*total);jQuery('#nivo-slider').nivoSlider({
            effect:'fade', //Specify sets like: 'fold,fade,sliceDown,slideInLeft'animSpeed:600, //Slide transition speedpauseTime:30000,
            directionNav:false, //Next and Prev// directionNavHide:true, //Only show on hovercontrolNav:true, //1,2,3...controlNavThumbs:true, //Use thumbnails for Control NavcontrolNavThumbsFromRel:true, //Use image rel for thumbspauseOnHover:false, //Stop animation while hovering//captionOpacity:0.3, //Universal caption opacitystartSlide:0, //Set starting Slide (0 index)// keyboardNav:true //Use left and right arrowsafterChange: function(){
                current_slide_no = jQuery('#nivo-slider').data('nivo:vars').currentSlide;
                jQuery('#nivo-slider-status > .current-slide').html(current_slide_no+1);
            }
        });
        jQuery('#nivo-slider-status').show();
        jQuery('#nivo-slider-status > .total-slides').html(total);
        current_slide_no = jQuery('#nivo-slider').data('nivo:vars').currentSlide;
        jQuery('#nivo-slider-status > .current-slide').html(current_slide_no+1);
    });
    </script>

and my html (should be outside the NIVO slider DIV) is

<divid="nivo-slider-status"class="alignright"><spanclass="current-slide"></span> of <spanclass="total-slides"></span></div>