Run jCarouselLite again, after an AJAX request

Question

I am using jCarouselLite to show a post scroller, which loads posts from a specific category. But, I want to be able to switch the category via AJAX.

So, I load up everything in a div, and then run:

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

});

And it works... up until ajax refreshes the innerHTML of the #serviceNews. Then jCarouselLite stops working. I've tried using livequery:

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

});

But the same thing happens. I am not very familiar with jQuery, so I'm probably missing out something obvious.

You can find the demo here (the middle column, below the banner, with the switchCategory buttons below the scroller).

Answer 1

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

the documentation mentions here that you could end the carousel with

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

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

Answer 2

The solution from maniac_user is working for me.

Try to set a :

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

Before your jCarousel code :

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