使用 Nivo Slider 显示载玻片计数答案

【问题标题】：Showing Slide Count with Nivo Slider使用 Nivo Slider 显示载玻片计数
【发布时间】：2011-03-26 10:09:19
【问题描述】：

我想在我的滑块上将幻灯片数显示为2 of 10。如何使其与过渡3 of 10、4 of 10（滑块随幻灯片移动）和7 of 10（如果单击相应的缩略图）一起工作？

【问题讨论】：

【解决方案1】：

您可以将当前幻灯片编号设置为current_slide_no = jQuery('#nivo-slider').data('nivo:vars').currentSlide; 将其添加 1，因为索引从 0 开始。

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

所以，我得到了它的工作

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

【讨论】：

@Ashframe 感谢您的解决方案。但我有一个问题：我正在尝试在具有多个滑块的页面上添加幻灯片计数，但幻灯片总数是错误的。我能做什么？
@marcelo2605 为每个滑块设置唯一的 ID，并确保 JS 代码针对正确的实例。

【解决方案2】：

您需要查找 clickhandler 和/或转换事件。我还没用过 nivo 但这是你需要做的事情：

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

【讨论】：

谢谢！我发现 Nivo 滑块提供了检索当前幻灯片编号的简单方法，然后我在每次幻灯片更改后使用它来计算正确的值。