jquery - 带有当前/总幻灯片的 jQuery 循环分页

Question

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

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

有人能帮忙吗？谢谢！

Answer 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'),
});

Answer 2

无需计算总数和幻灯片索引，因为 jquery 循环插件已经在 after 事件中将它们返回给您。

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

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

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