jQuery Cycle pagination with current/total slide

Question

I'd like to build a jQuery Cycle slideshow with pagination in the format of "current_slide/total_slides" as seen here

I'm assuming I'd use pageAnchorBuilder to show the current and total slide numbers and then onAfter to update the current slide number?

Can anyone help with this? Thanks!

Answer 1

I recommend using jQuery Cycle plugin. Imagine that slides are an ordered list:

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

you can obtain the total number of slides by calling:

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

Then we need to update the counter after slide changes:

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