title: Pagination issue with jcarousel dynamic content
body: <p>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' &amp; 'next' buttons. It is working fine if I make the 'li' content static.</p>
  
  <pre><code>&lt;div class="jcarousel-wrapper"&gt;
      &lt;div class="jcarousel" id="carousel"&gt;
          &lt;ul&gt;&lt;/ul&gt;
      &lt;/div&gt;
  
       &lt;a href="#" class="jcarousel-control-prev"&gt;&amp;lsaquo;&lt;/a&gt;
       &lt;a href="#" class="jcarousel-control-next"&gt;&amp;rsaquo;&lt;/a&gt;
  
       &lt;p class="jcarousel-pagination"&gt;&lt;/p&gt;
  
  &lt;/div&gt;
  
  
  
   $(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 += '&lt;li&gt;&lt;img src="' + imgsrc + '"/&gt;&lt;/li&gt;';
          })
  
      $('.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 &gt; 900) {
              width = width / 3;
          } else if (width &gt; 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 '&lt;a href="#' + page + '"&gt;' + page + '&lt;/a&gt;';
          }
      }); 
  
      $( window ).resize();           
  
  
   }
  </code></pre>