Dynamically add items to jCarousel on Prev, Next button click

programming web dev
1

I’m trying to dynamically add an item to the beginning or end of a jcarousel when the user clicks the next or prev button. For the life of me I just can’t get it to work. I can dynamically load the first 6 items when I init the carousel, but after that can’t add any more. Below is my code an advice would be GREATLY appreciated!


<script type="text/javascript">

/* Returns formated <li> for carousel */
function mycarousel_getItemHTML (id, thumb_name) {
	return '<li id="' + id + '"><img src="static/images/portraits/thumbs/' + thumb_name + '" width="45" height="41" alt="" /></li>';
}

function mycarousel_itemAddCallback (carousel, first, last, data) {
	$.each(data, function(key, val) {
		carousel.add(mycarousel_getItemHTML(key, val.thumb_name));
	});
}

function mycarousel_itemLoadCallback (carousel, state) {
	var load_url = "resources/library/getRandomImage.php";
	
	if (state == 'init') { load_url += "?num=6"; }

	$.getJSON(load_url, function (data) {
		 mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, data);		
	});
}

$(document).ready(function () {

	$.ajaxSetup({ cache:false });
	
	$('#my-carousel').jcarousel({
		itemLoadCallback: mycarousel_itemLoadCallback,
		scroll:1,
		size: 5
	});
	
});
	
</script>