Loading items dynamically in jcarousel

I am using JCarousel to display pictures from the DB into JCarousel.

I am retrieving 500 pictures from the DB (for example) but i want to display only 50 pictures in jcarousel.

This is my Code to populate the JCarousel

  if ($("input[id$='hid_RowCount']").val() == 1) {
    jQuery('#mycarousel').jcarousel({ scroll: 7
    })


    function JCarouselJquery(jsonData){
        jQuery('#mycarousel').jcarousel({
        itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
    });

}

    function mycarousel_itemLoadCallback(carousel, state)
    {
       for (var i = carousel.first; i <= carousel.last; i++) {
       if (carousel.has(i)) {
                continue;
            }

            if (i > jsonData._items.length) {
                break;
            }

            carousel.add(i, jsonData._items.length[i-1]);

            }
        };

I am breaking my head to complete this task.

It will be of great help if some one provide some ideas or sample code.

Solution

@user ,

You shouldn't load 500 picuters from the database.

You should have some id in the database or path, The images should come from some image server.So it will be fast.

Write an API which gets you a maximum of 50 images per page.

In the caraousal , whenever you click next , swap the ids and src of the images from the next 4 images

We have implemented the same here http://www.allposters.com