Question

Im currently using a plugin called Cycle for jQuery and would like to tweak a small piece of functionality but don’t really know how.

I made an example which can be viewed here on jsbin.

The issue that I am having is with the actual slide “counter.” The way that its currently configured, the current slide that it is on does not update until the fade has finished. This is done through the plugins “after” callback. More of the options are here.

What I would like to do however is make it to where as soon as the animation starts, the number changes. So essentially the second slide 2 would start to animate in, the count would go “2 of 3”

Any help would be greatly appreciated. Will send cookies if necessary.

Answer 1

Not familiar with this plugin but the following changes might help you with this:

jQuery(function(){

$('#slideshow-container').cycle({
    speed:  '1200',
    before: before,
    timeout: 1200
  });
});

started = false;
function before(curr,next,opts) {
  var slide = (!started ) ? 1 : opts.nextSlide + 1;

  started = true;
  var caption1 = '(' + (slide) + ' of ' + opts.slideCount + ')';
  $('#count').html(caption1);
}