jCarousel shows and slides half of the images

I have a template slider on my web page, and I load images dynamically via ajax. After downloading the images, I have a self invoked JavaScript code to bind t开发者_如何学Gohe downloaded images to the slider. But the problem is, I don't get the whole images. It shows only half of the images and when it scrolls, it ruins everything and no image anymore is shown.

The strange part is that, when I F12 (bring up the Firebug), it aligns itself, but then, on next slide it shows half of the image.

This is the JavaScript I use for binding jCarousel. This JS code is got via AJAX call.

function mycarousel_initCallback(carousel) {
    console.log('binding left button');
    jQuery('#leftBtn').bind('click', function () {
        carousel.prev();
        return false;
    });
    console.log('binding right button');
    jQuery('#rightBtn').bind('click', function () {
        carousel.next();
        return false;
    });
};
(function () {
    console.log('binding carousel');
    jQuery("#currentLookAlbumImages").jcarousel({
        scroll: 1,
        visible: 1,
        wrap: 'circular',
        itemFallbackDimension: 428,
        initCallback: mycarousel_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
})();