使用Nivo滑块显示滑块数

Question

我想在滑块上显示滑块数为2 of 10。我如何使它与过渡3 of 10,4 of 10（随着滑块移动滑块）& 7 of 10（如果相应的缩略图被点击）一起工作？

Answer 1

您可以让当前幻灯片没有为current_slide_no = jQuery('#nivo-slider').data('nivo:vars').currentSlide;添加1把它作为索引从0

开始使用afterChange属性在初始化NIVO滑块时更改当前幻灯片编号。

于是，我懂了工作通过

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

和我的HTML（应该是NIVO滑块DIV外）是

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

Answer 2

您需要查找clickhandler和or transition事件。我没有使用过NIVO还没有，但是这是你需要做的concet：

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); 
});