Jquery, Jcarousel, first pagination item set to :active unless another is set

Question

I have been able to get the clicked pagination item to respond to a css selector. But I can't get it to be :active if the user uses the next and back buttons vs the pagination.

ul.jcarousel-control li a:focus {background-position:0 -11px}
ul.jcarousel-control li a:active {background-position:0 -11px}

That stuff makes it work if the item is clicked but you use the next button to scroll, it doesn't highlight then next one.

I also need it to highlight the first one when the page loads.

any help is greatly appreciated.

jQuery('.jcarousel-control a').bind('click', function() {
    carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
    return false;
});

jQuery('#mycarousel-next').bind('click', function() {
    carousel.next();
    return false;
});

jQuery('#mycarousel-prev').bind('click', function() {
    carousel.prev();
    return false;
});
};

Answer 1

This link shows you how to do this. You need to add two call back functions (itemVisibleInCallback and itemVisibleOutCallback) to add/remove a div class from the selected image.