jQuery 循环分页与当前/总幻灯片

Question

我想构建一个带有"current_slide/total_slides"格式的分页的jQuery Cycle幻灯片，如下所示

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

谁能帮忙？ 谢谢！

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/