Question

I have 3 cycles per page and they’re all working great with one exception. Their counters, which display things like “1/3” for 1 of 3 slides all update together. If I advance the first cycle to slide 2, the counters for the other two cycles increment as well so that all three display “2/3”. Here’s my code:

$('.slides').each(function() {
    var $this = $(this), $ss = $this.closest('.slide-container');
    var prev = $ss.find('a.slide-control-previous'), next = $ss.find('a.slide-control-next');
    $this.cycle({
        fx: 'scrollHorz',
        pause: 1,
        prev: prev,
        next: next,
        speed: 1000,
        after: onAfter
    });
});
function onAfter(curr,next,opts) {
    var caption = '<span>' + (opts.currSlide + 1) + '</span>/' + opts.slideCount;
    $('.slide-count').html(caption);
}

The issue is obviously at function onAfter but I can’t seem to find how to pass the cycle container ID from $this.cycle into onAfter. Any ideas?

Answer 1

The accepted answer here on how to find cousin elements helped me find the solution to this problem. In place of $('.slide-count').html(caption); in my code above, this works:

$(this).closest(':has(.slide-count)').find('.slide-count').html(caption);