How to highlight external controller for JCarousel

JCarousel is  a great JQuery plugin where you put multiple  image and text into horizontal or vertical slide.

Sadly, there is no proper documentation on how to highlight the external controller.

After few try and error, I manage to get the selected number in highlight mode ( using CSS of course ).

My external controller is a collection of hyperlink inside a DIV.

<div id=”jcarousel-control”>

<a href=”#”>1</a>

<a href=”#”>2</a>

<a href=”#”>3</a>

</div>

Below are the Jquery code.

<script type="text/javascript">

// it will append class="selected" into <a>
// <a href="#">1</a> to <a href="#" class="selected">1</a>
function highlight(carousel, obejctli,liindex,listate){	
     jQuery('.jcarousel-control a:nth-child('+ liindex +')').attr("class","selected");
};
// it will remove last selected slide from <a>
// <a href="#" class="selected">1</a> to <a href="#">1</a>
function removehighlight(carousel, obejctli,liindex,listate){
     jQuery('.jcarousel-control a:nth-child('+ liindex +')').removeAttr("class","selected");
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
	itemVisibleInCallback:  highlight,
	itemVisibleOutCallback: removehighlight		
    });
});
</script>

Feel free to use the comment area if you need any help.