Pagination not working with carousel loaded via Ajax

[notserk]

Hello recently we just upgraded the jcarousel library and now the pagination is not working. Here's the link to our staging site: dectest.usaid.gov

Below is the code we are using:

JS:

(function($) { $(function() { var jcarousel = $('.jcarousel').jcarousel({ 'animation': 'slow' ,'wrap': 'circular' }) .jcarouselAutoscroll({ 'interval': 5000 });

$('.jcarousel-pagination')
                .on('jcarouselpagination:active', 'a', function() {
                    $(this).addClass('active');
                })
                .on('jcarouselpagination:inactive', 'a', function() {
                    $(this).removeClass('active');
                })
                .jcarouselPagination(); 

    $('.jcarousel-control-prev')
        .on('active.jcarouselcontrol', function() {
            $(this).removeClass('inactive');
        })
        .on('inactive.jcarouselcontrol', function() {
            $(this).addClass('inactive');
        })
        .jcarouselControl({
            target: '-=1'
        });

    $('.jcarousel-control-next')
        .on('active.jcarouselcontrol', function() {
            $(this).removeClass('inactive');
        })
        .on('inactive.jcarouselcontrol', function() {
            $(this).addClass('inactive');
        })
        .jcarouselControl({
            target: '+=1'
        });

    var setup = function(data) {
        var html = '<ul>';

        $.each(data.Images, function() {
            html += '<li><a href=\"' + this.link + '\"><img src=\"' + this.imageURL 
                    + '\" alt=\"' + this.title + '\"></a><h2 class=\"caption\"><span>'+ this.caption +'</span></h2>'                    
                    +  '</li>';
        });

        html += '</ul>';

        // Append items
        jcarousel
            .html(html);

        // Reload carousel
        jcarousel
            .jcarousel('reload');

    };

    $.getJSON('carousel/images.json', setup);
});

})(jQuery);

The HTML is as is supposed to be.

What am I missing?

[jsor]

Not sure what the reason is, in theory this should work. Have you tried to intialize everything after the list is ready.

(function($) {
    $(function() {
        var jcarousel = $('.jcarousel');

        var init = function() {
            jcarousel.jcarousel({
                'animation': 'slow'
                ,'wrap': 'circular'
            })
            .jcarouselAutoscroll({
                'interval': 5000
            });

            $('.jcarousel-pagination')
                .on('jcarouselpagination:active', 'a', function() {
                    $(this).addClass('active');
                })
                .on('jcarouselpagination:inactive', 'a', function() {
                    $(this).removeClass('active');
                })
                .jcarouselPagination(); 

            $('.jcarousel-control-prev')
                .on('active.jcarouselcontrol', function() {
                    $(this).removeClass('inactive');
                })
                .on('inactive.jcarouselcontrol', function() {
                    $(this).addClass('inactive');
                })
                .jcarouselControl({
                    target: '-=1'
                });

            $('.jcarousel-control-next')
                .on('active.jcarouselcontrol', function() {
                    $(this).removeClass('inactive');
                })
                .on('inactive.jcarouselcontrol', function() {
                    $(this).addClass('inactive');
                })
                .jcarouselControl({
                    target: '+=1'
                });
        };

        var setup = function(data) {
            var html = '<ul>';

            $.each(data.Images, function() {
                html += '<li><a href=\"' + this.link + '\"><img src=\"' + this.imageURL 
                        + '\" alt=\"' + this.title + '\"></a><h2 class=\"caption\"><span>'+ this.caption +'</span></h2>'                    
                        +  '</li>';
            });

            html += '</ul>';

            // Append items
            jcarousel
                .html(html);

            // Init carousel
            init();
        };

        $.getJSON('carousel/images.json', setup);
    });
})(jQuery);

[notserk]

Ok I just implemented the solution above and it works now. I was missing the init(); as opposed to jcarousel.jcarousel('reload'). Thanks man you're awesome you've made my day :-)