Question

I’m using the jQuery Cycle plugin to create an image slideshow. It works great, but I have a minor issue I can’t seem to solve. If you click on the “Prev” or “Next” links the slideshow counter doesn’t update until after the animation has finished. Ideally the slideshow count would update as soon as you clicked on either of these links, and then the animation would take place.

JSFiddle is here: http://jsfiddle.net/dD52s/

Answer 1

Instead of after callback use before callback if you want the counter to set before animation begins. Try this

$(document).ready(function() {

    $('.slideshow').cycle({
        fx: 'scrollHorz',
        timeout: 0,
        next: '.next, .slideshow img',
        prev: '.prev',
        speed: 600,
        before: onAfter,
    });

    function onAfter(curr,next,opts) {
        var caption = ($(next).index() + 1) + '/' + opts.slideCount;
        $('.counter').html(caption);
    }

   $('.description').cycle({
        fx: 'none',
        timeout: 0,
        next: '.next, .slideshow img',
        prev: '.prev'
    });

});

Working http://jsfiddle.net/dD52s/2/