Problem with Ajax calling

[vikasdream]

Hi Guys,

I'm stuck in one issue.

When I'm trying to append the content on some event (I will done through AJAX) then carousel is not working and it is not going to next slide. I done the reset and refresh part.

here is my code:

(function() {
var $carousel = $('#carousel_5').carousel({
indicator: true,
easing: 'linear',
duration: 0.5
}),
$prev = $('#carousel_4_prev'),
$next = $('#carousel_4_next'),
num = 1;

$('#carousel_5_prev').on('click', function(ev) {
    ev.preventDefault();
    $carousel.carousel('prev');
});
$('#carousel_5_next').on('click', function(ev) {
    ev.preventDefault();
    $carousel.carousel('next');
});

$carousel.bind({
    'Carousel.next': function() {
        //alert('moved to next');
        num = 1;
        $carousel.carousel('reset');
        $carousel.append('<div class="carousel_box">' + (++num) + '</div>');
        $carousel.carousel('refresh');
        $carousel.carousel('next');
    },
    'Carousel.prev': function() {
        //alert('moved to prev');
    }
});

}());

But it is not working and slider is running infinite time.

My requirement is that when carousel running automatically OR some one click on the NEXT button then I need to append the new content, reset and reload the carousel and then slider need to jump to the next slide without affectting smoothness.

Please help me

Thanks in advance

Viki