jQuery Cycle plugin: multiple cycle instances work independently, but their counters do not
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 conta开发者_如何学Goiner ID from $this.cycle
into onAfter
. Any ideas?
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);
精彩评论