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

Question

我想建立与分页jQuery的周期幻灯片在"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'),
});