jcarousel-pagination is not displaying the first number in my carousel list

Question

I have been tasked with the tedious task of cleaning up our company website during which I came across references to a very outdated jquery library and a very old jcarousel library. Upon updating both libraries and re-coding jcarousel to use the updated syntax etc I have noticed that my carousel no longer displays the first element of the pagination list like before, meaning it starts with the appropriate picture and works as expected but the list below the picture starts at 2 (so instead of saying 1 2 3 4 5 it shows 2 3 4 5 and will highlight 2 once picture 2 becomes active but never shows 1). Here is a segment of my code

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);

As always, help would be greatly appreciated. Thanks in advance.

Answer 1

Turns out my code was correct. The issue lied within CSS where a padding element was pushing the first number behind the picture where I couldn't see it.