Executing function after every transition using Jquery Cycle Plugin

$(document).ready(function(){

var $container = $('#main_slider').cycle({ 
    fx:     'fade', 
    speed:   300, 
    timeout: 4000
}); 

$container.children().each(function(i) { 
    // create input 
    $('#thumb-'+(i+1)).click(function() { 
            // cycle to the corresponding slide 
            $("#black-bars").animate({"top": ''+(i*76.5)+'px'}, "slow", "swing");
            $container.cycle(i); 
            return false; 
        }); 
}); 

});

I have simple s开发者_如何学编程lideshow that has side thumbs, and when they are clicked the black bars slide to their appropriate position to "highlight" it.

Now, this effect only occurs when the user manually clicks the thumb, so I want it to also animate automatically after each slide has transitioned.

I think Cycle has a After attribute that allows you to execute a function after every slide, however how would I create a counter or retrieve which slide "number" it is currently on? I need it to determine what the position should be for the black bars.

Thanks

---

You can use options 'before' and 'after' for this. Both of these callback functions pass current slide and next slide as parameters. Check this example: http://jquery.malsup.com/cycle/int2.html