Pagination issue with jcarousel dynamic content

Question

I am using jcarousel to create an image gallery view, and dynamically I am loading the images to the jcarousel view. The issue what I am facing is, my jcarousel 'pagination bar' is not showing multiple items. It always shows single item, even though I am able to navigate through the items using 'previous' & 'next' buttons. It is working fine if I make the 'li' content static.

<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

I could resolve the issue.

$(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'); 

});