jquery - 在 jcarousel 中动态加载项目

Question

我正在使用 JCarousel 将数据库中的图片显示到 JCarousel 中。

我正在从数据库检索 500 张图片(例如)，但我只想在 jcarousel 中显示 50 张图片。

这是我填充 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]);

            }
        };

为了完成这项任务，我正在绞尽脑汁。

如果有人提供一些想法或示例代码，将会有很大帮助。

Answer 1

@用户，

您不应该从数据库加载 500 张图片。

你应该在数据库或路径中有一些ID，图像应该来自某个图像服务器。所以它会很快。

编写一个 API，让您每页最多显示 50 个图像。

在 caraousal 中，每当您单击“下一步”时，都会交换接下来 4 个图像中图像的 ids 和 src

我们在这里实现了相同的http://www.allposters.com