I have a jCarouselLite plug in on my website. I am loading the li's from a jquery.load function. I cycle through the carousel vertically and have a function that triggers as soon as the first item comes back around to the top.
At this point, I want to refresh the data with another ajax.load. This is where I run into a problem. Once that data is reloaded, the carousel stops rotating (or rather, is running in the background).
One solution I tried is to try re-instating the carousel with another:
$("#tableapp").jCarouselLite({})
line. This seems to cause two carousels to be running at the same time. And then a third, and 4th, and so on.
So basically I am looking for some way to clear the carousel, reload the updated data, then run it again. Any ideas?
$(document).ready(function () {
updateConsole() //Gets new data
scrollWindow() //Starts carousell
});
function updateConsole() {
$('#tableapp').load('AjaxPages/ApplicationMonitor.aspx #application');
}
function scrollwindow() {
$("#tableapp").jCarouselLite({
vertical: true,
hoverPause: true,
visible: 4,
auto: 6000,
speed: 500,
scroll: 4,
circular: true,
afterEnd: function (a) { ScrollEnd(a); }
});
};
function ScrollEnd(a) {
$('#tbDebug').val($('#tbDebug').val() + '\nScroll Ends');
if (**code that determines slide 1 is back on top**) {
updateConsoles();
scrollWindow(); //If this code is commented, the carousel stops cycling.
//If it isn't commented, two carousels start and things
//get buggy and eventually freezes.
}
}
I am pretty new to javascript, jquery, etc. I also tried this on jCarousel (not lite), but I couldn't get it working with vertical scrolling. It seemed buggy.
