JQuery Cycle - How To Change Class Of Element Based On Active Slide

I have a sideshow using jQuery Cycle. The way it works is that clicking the .next or .prev divs cycles through the slideshow as expected. What I need it to do though is to have it

Solution 1:

Try with this jquery code

var PREFIX_ID_PAGINATION = "goto";
var PREFIX_ID_SLIDESHOW = "tl_";

$('.tl_slideshow').cycle({
        fx:         'scrollHorz',
        next:       '.next',
        prev:       '.prev',
        timeout:    0,
        speed:      750,
        nowrap:     1,
        after:      onAfter
});

function onAfter(prev, current, opts) {
    var index = opts.currSlide;
    $('.prev')[index == 0 ? 'fadeOut' : 'fadeIn']();
    $('.next')[index == opts.slideCount - 1 ? 'fadeOut' : 'fadeIn']();

    var current_id = $(current).attr('id');
    if( current_id.match("^" + PREFIX_ID_SLIDESHOW + "[0-9]+$")){
        $('li.active').removeClass('active');
        $('#' + PREFIX_ID_PAGINATION + current_id.replace(PREFIX_ID_SLIDESHOW,"")).addClass('active');
    }
}

There is a jsfiddle example here