jQuery Cycle Page Count Change "onSlide"

Question

If there's another SO question on here, neither Google or I could find it. Firstly, thanks for any replies.

Here's my setup. It's a little different than your normal ("#item").cycle(); sort of thing, but there are a few complicated set ups with this. I'm just including the desktop variable which contains everything that gets passed through based off a matchMedia result.

var desktop = {
    next: "#next_slide",
    prev: "#prev_slide",
    speed: 2000,
    pager: "#pag",
    easeIn: 'easeOutQuad',
    easeOut: 'easeInQuad',
    fx: 'custom',
    height: '314px',
    cssBefore:{  
        left: '-20%',
        opacity: 0,
        display: 'block'
    },
    cssAfter:{ 
        display: 'none',
        opacity: 0
    }, 
    animIn: {  
        left: '0%',
        opacity: 1 
    }, 
    animOut: {  
        left: '20%',
        opacity: 0
    },
    sync: false,
    'timeout': 7000,
    after: function(currSlideElement, nextSlideElement, options, forwardFlag){
         $('#controls p').html( (options.currSlide + 1 ) + ' <em>of</em> ' + options.slideCount)
    }
}

I need a way to get the "Slide x of x" to change ON SLIDE. Currently, the rotation will transition, and then the numbers will change. I know that's kind of a default set up with cycle, but I was wondering if there's anything I can do to have the slide count change during or on slide. It's a picky client request and I've been told that if I can't do it, then there's no harm. This is mostly just curiosity.

If you need more of the code, I can add it, but I really think just a basic config variable for the slider in question is enough, and since it's not a bug/error and more a request for ideas then it should do fine. I would also get you a fiddle of the set up, but currently under some time restraints and will be doing other changes while awaiting an answer. Also, would give access but entire thing is under complete intranet lockdown and nowhere for other people to access.

Answer 1

I think you may consider doing it on the before event with a timeout equal or slightly less than the fx duration. Something along these lines:

Demo: http://jsfiddle.net/lucuma/ny2Tj/5/

var desktop = {
    next: "#next_slide",
    prev: "#prev_slide",
    speed: 2000,
    pager: "#pag",
    easeIn: 'easeOutQuad',
    easeOut: 'easeInQuad',
    fx: 'custom',
    height: '314px',
    cssBefore:{  
        left: '-20%',
        opacity: 0,
        display: 'block'
    },
    cssAfter:{ 
        display: 'none',
        opacity: 0
    }, 
    animIn: {  
        left: '0%',
        opacity: 1 
    }, 
    animOut: {  
        left: '20%',
        opacity: 0
    },
    sync: false,
    'timeout': 7000,
    before: function(currSlideElement, nextSlideElement, options, forwardFlag){
       var $opts= options;
       setTimeout(function() {
            $('#controls p').html( ($opts.currSlide + 1 ) + ' <em>of</em> ' + $opts.slideCount)
       }, 7000);
    }
}