jQuery cycle2 after function

Question

How can we add after, before call back function in new jQuery cycle , Links here http://jquery.malsup.com/cycle2

I do work with jQuery cycle(old version) but i dont know how to implement cycle2(new version)

http://jsfiddle.net/3vjgJ/2/

Examples jQuery code of old version cycle (check after function code )

$('#mySlideshow').cycle({ 
    fx:     'scrollHorz', 
     after: function() {
        $('ul li').removeClass('test');
        $(this).addClass('test') 
    }
});

<ul id="mySlideshow" class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-slides="li" data-cycle-timeout="0" data-cycle-prev=".prev" data-cycle-next=".next">
   <li><img src="http://placehold.it/350x150" alt=""></li>
   <li><img src="http://placehold.it/350x150" alt=""></li>
</ul>
<a href=# class="prev">Prev</a>
<a href=# class="next">Next</a>
</ul>

Answer 1

Cycle2 is different to Cycle if you read to FAQ bit on the website. In Cycle2 after function is being not used anymore. If you add the following line to your code it should work:

$('#mySlideshow').on('cycle-after',function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag){
    $('ul li').removeClass('test');
    $(incomingSlideEl).addClass('test') 
});

You can remove the

after: function() {
    $('ul li').removeClass('test');
    $(this).addClass('test') 
}

Also, Cycle2 works without adding the $('#mySlideshow').cycle({ .. }) bit.

So you can just have

$('#mySlideshow').on('cycle-after',function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag){
    $('ul li').removeClass('test');
    $(incomingSlideEl).addClass('test') 
});

and everything should work. http://jsfiddle.net/3vjgJ/12/