jcarousel 动态内容的分页问题

Question

我正在使用 jcarousel 创建一个图库视图，并且动态地将图像加载到 jcarousel 视图中。我面临的问题是，我的 jcarousel '分页栏' 没有显示多个项目。它总是显示单个项目，即使我能够使用“上一个”和“下一个”按钮浏览项目。如果我将 'li' 内容设为静态，它工作正常。

<div class="jcarousel-wrapper">
    <div class="jcarousel" id="carousel">
        <ul></ul>
    </div>

     <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
     <a href="#" class="jcarousel-control-next">&rsaquo;</a>

     <p class="jcarousel-pagination"></p>

</div>



 $(document).on('pagebeforeshow',"#gallery", function() {  

 configureJcarousel(); 

    var imagegallerycontent = '';

        var i=0;
        var data = session.imagesdata;
        $.each(data, function (index, data) {
        i+=1;
        var imgsrc = "data:image/png;base64," + data;
        imagegallerycontent += '<li><img src="' + imgsrc + '"/></li>';
        })

    $('.jcarousel ul').empty().html(imagegallerycontent);
    $('.jcarousel').jcarousel('reload'); 

});


function configureJcarousel() 
 {

  $('.jcarousel')
    .on('jcarousel:create jcarousel:reload', function() {
        var element = $(this),
            width = element.innerWidth();

        if (width > 900) {
            width = width / 3;
        } else if (width > 600) {
            width = width / 2;
        }

        element.jcarousel('items').css('width', width + 'px');
    })
    .jcarousel({

    });     

    $('.jcarousel-control-prev').click(function() {
    $('.jcarousel').jcarousel('scroll', '-=1');
    });

    $('.jcarousel-control-next').click(function() {
    $('.jcarousel').jcarousel('scroll', '+=1');
    });

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


    $('.jcarousel-pagination').jcarouselPagination({
        item: function(page) {
            return '<a href="#' + page + '">' + page + '</a>';
        }
    }); 

    $( window ).resize();           


 }

Answer 1

我可以解决这个问题。

$(document).on('pagebeforeshow',"#gallery", function() {  

 //configureJcarousel(); 

    var imagegallerycontent = '';

        var i=0;
        var data = session.imagesdata;
        $.each(data, function (index, data) {
        i+=1;
        var imgsrc = "data:image/png;base64," + data;
        imagegallerycontent += '<li><img src="' + imgsrc + '"/></li>';
        })

    $('.jcarousel ul').empty().html(imagegallerycontent);
    configureJcarousel(); 
    $('.jcarousel').jcarousel('reload'); 

});