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 corresponding thumbnail was clicked)?

回答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

<script type="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 speed             pauseTime:30000,             directionNav:false, //Next and Prev             // directionNavHide:true, //Only show on hover             controlNav:true, //1,2,3...                 controlNavThumbs:true, //Use thumbnails for Control Nav             controlNavThumbsFromRel:true, //Use image rel for thumbs             pauseOnHover:false, //Stop animation while hovering             //captionOpacity:0.3, //Universal caption opacity             startSlide:0, //Set starting Slide (0 index)             // keyboardNav:true //Use left and right arrows             afterChange: 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

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

回答2:

You would need to look for the clickhandler and or transition event. I haven't used nivo yet but this is the concet you need to do:

parent = $('#buttons'); // button container pages = parent.find('.button').size; // total number of pages  parent.find('.button').click(function(){   index = parent.index($this) + 1; // this is the the page number    //do something with these variables   $('#div1').html(index + ' of ' + pages);  }); 

文章来源: Showing Slide Count with Nivo Slider