带有当前/总幻灯片的 jQuery 循环分页答案

【问题标题】：jQuery Cycle pagination with current/total slide带有当前/总幻灯片的 jQuery 循环分页
【发布时间】：2012-04-18 21:50:13
【问题描述】：

我想构建一个 jQuery Cycle 幻灯片，分页格式为“current_slide/total_slides”，如 here 所示

我假设我会使用 pageAnchorBuilder 显示当前和总幻灯片编号，然后使用 onAfter 更新当前幻灯片编号？

有人可以帮忙吗？谢谢！

【问题讨论】：

您选择的答案实际上是错误的。您可以将幻灯片作为幻灯片支架内的任何元素嵌入（即
...），因此除了最简单的情况外，依靠计算孩子数是行不通的。

标签： jquery cycle jquery-cycle pager

【解决方案1】：

我推荐使用 jQuery Cycle 插件。假设幻灯片是一个有序列表：

<ol class="slides">
    <li class="slide">...</li>
    ...
</ol>
<a id="prev">?</a><span id="counter">1 / 1</span><a id="next">?</a>

您可以通过调用获取幻灯片总数：

var total = $('.slides').children().length;

那么我们需要在幻灯片更改后更新计数器：

$('.slides').cycle({
    after(el) {
        const currentSlideNo = $(el).index();
        $('#counter').text(currentSlideNo + ' / ' + total);
    },
    prev: $('#prev'),
    next: $('#next'),
});

【讨论】：

这可能是一个简单的问题...但是您使用 index() 的方法返回从零开始的结果...所以我的第一张图片显示为“0 / 5”。有没有办法使用基于 1 的计数方法？在 index() 之后简单地添加“+1”似乎并不可靠。谢谢！
是的，当然，没有想到这一点。在 $('#counter').text... 之后将 currentSlideNo 更改为 (currentSlideNo+1)。它应该可以工作，如果没有，可能需要额外的 parseInt。
使用$('#counter').text(currentSlideNo+1' / '+total); 会导致意外字符串错误。我已经通过使用'onPrevNextEvent'而不是'after'函数来解决它，并设置var currentSlideNo = $(slideElement).index() +1;
有一个错字...当然应该是(currentSlideNo+1+' / '+total)。
使用.index() 似乎并不可靠。 after 回调函数获取options 对象中的当前幻灯片。我认为这样效果更好。

【解决方案2】：

不需要计算total和slideindex，因为jquery循环插件已经在after事件中返回给你了。

 after: function(currSlideElement, nextSlideElement, options, forwardFlag) {

    $('#counter').text((options.currSlide + 1) + '/' + (options.slideCount));
 }

这是一个 jsfidde：http://jsfiddle.net/lucuma/Dhqdc/2/

【讨论】：

太棒了！谢谢 - 我最喜欢这个答案
另一个答案实际上是不正确的，因为您可以提供一个选择器来确定哪些元素是幻灯片，因为 $().children 不起作用。最好使用插件api