jcarousel-pagination не отображает первое число в моем списке каруселей

Question

Мне поручили утомительную задачу очистки нашего веб-сайта компании, в ходе которого я столкнулся с ссылками на очень устаревшую библиотеку jQuery и очень старую библиотеку jcarousel. После обновления обеих библиотек и повторного кодирования jcarousel для использования обновленного синтаксиса и т. Д. Я заметил, что моя карусель больше не отображает первый элемент списка разбиения на страницы, как раньше, то есть он начинается с соответствующего изображения и работает так, как ожидалось, но список ниже картинка начинается с 2 (поэтому вместо того, чтобы говорить 1 2 3 4 5, она показывает 2 3 4 5 и выделяет 2, как только изображение 2 становится активным, но никогда не показывает 1). Вот сегмент моего кода

index.html

<div class="jcarousel-wrapper"> 
    <div class="jcarousel"> 
     <ul> 
      <li><a href="${base_url}/company.html"><img src="${base_url}/images/carousel/1CompSciHomeCarousel-company.png" alt="company" /></a></li> 
      <li><a href="${base_url}/auditpro.html"><img src="${base_url}/images/carousel/2CompSciHomeCarousel-audit.png" alt="audit|pro" /></a></li> 
      <li><a href="${base_url}/ic.html"><img src="${base_url}/images/carousel/3CompSciHomeCarousel-iC.png" alt="iC" /></a></li> 
      <li><a href="${base_url}/services.html"><img src="${base_url}/images/carousel/4CompSciHomeCarousel-services.png" alt="services" /></a></li> 
      <li><a href="${base_url}/i16.html"><img src="${base_url}/images/carousel/5CompSciHomeCarousel-i16.png" alt="i16" /></a></li> 
     </ul> 
     <p class="jcarousel-pagination"> 

     </p> 
    </div> 
</div> 

function.js

(function($) { 
    $(function() { 
     $('.jcarousel') 
      .jcarousel({ 
       wrap: 'circular' 
      }) 
      .jcarouselAutoscroll({ 
       interval: 4000, 
       target: '+=1', 
       autostart: true, 
      }); 

     $('.jcarousel-control-prev') 
      .on('jcarouselcontrol:active', function() { 
       $(this).removeClass('inactive'); 
      }) 
      .on('jcarouselcontrol:inactive', function() { 
       $(this).addClass('inactive'); 
      }) 
      .jcarouselControl({ 
       target: '-=1' 
      }); 

     $('.jcarousel-control-next') 
      .on('jcarouselcontrol:active', function() { 
       $(this).removeClass('inactive'); 
      }) 
      .on('jcarouselcontrol:inactive', function() { 
       $(this).addClass('inactive'); 
      }) 
      .jcarouselControl({ 
       target: '+=1' 
      }); 

     $('.jcarousel-pagination') 
      .on('jcarouselpagination:active', 'a', function() { 
       $(this).addClass('active'); 
      }) 
      .on('jcarouselpagination:inactive', 'a', function() { 
       $(this).removeClass('active'); 
      }) 
      .on('click', function(e) { 
       e.preventDefault(); 
      }) 
      .jcarouselPagination({ 
       'item': function(page) { 
        return '<a href="#">' + page + '</a>'; 
       } 
      }); 
    }); 
})(jQuery); 

Как всегда, помощь будет высоко оценена. Заранее спасибо.

Answer 1

Оказывается, мой код верен. Проблема лежала в CSS, где элемент дополнений подталкивал первое число за рисунком, где я не мог его видеть.