Run jCarouselLite again after an AJAX request

Question

I use jCarouselLite to show a post-scroller that loads messages from a specific category. But I want to be able to switch a category through AJAX.

So, I load everything into a div, and then run:

jQuery(function($) { $("#serviceNews").jCarouselLite({ vertical: true, hoverPause:true, visible: 2, auto:2000, speed:1000 }); 

});

And it works ... until ajax updates innerHTML #serviceNews. Then jCarouselLite stops working. I tried using livequery:

 jQuery(function($) { $("#serviceNews").livequery(function(){ $(this).jCarouselLite({ vertical: true, hoverPause:true, visible: 2, auto:2000, speed:1000 }); }); 

});

But the same thing is happening. I am not very familiar with jQuery, so I probably missed something obvious.

Here you can find a demo (middle column under the banner, with switchCategory buttons under the scroller).

Answer 1

hope you use the latest code https://github.com/kswedberg/jquery-carousel-lite

The documentation mentions that you can finish the carousel with

 $('div.carousel').trigger('endCarousel') 

So, every time you need to update the carousel only endCarousel and then bind jCarouselLite to div again

Answer 2

The solution from maniac_user works for me.

Try to install:

 $("div.carousel").trigger("endCarousel"); 

Before jCarousel code:

 $(".auto .jCarouselLite").jCarouselLite({ speed: 14700, btnNext: ".next", vertical: true, hoverPause:true, visible: 1 });