jQuery Cycle pagination with current/total slide

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!

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