slick-lightbox - Adding number navigation

I am trying to add number navigation into slick-lightbox, but I do not know how. Here is my code (HTML/PHP):

    <div class="main">
            <?php if ($tags && !is_wp_error($tags)) : ?>
                <?php foreach ($tags as $tag) : ?>
                    <div class="badge-custom"><?php echo $tag->name; ?></div>
                <?php endforeach; ?>
            <?php endif; ?>
            <div class="slider-wrap">
                <?php if ($gallery) : ?>
                    <?php foreach ($gallery as $image) : ?>
                        <div class="item-image"><img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" width="480" height="365"></div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
            <div class="thumbnail-nav">
                <?php if ($gallery) : ?>
                    <?php foreach ($gallery as $image) : ?>
                        <div class="item-image"><img src=" <?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" width="480" height="365"></div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
    </div>

I am using php because I want to display it in my WordPress site.

Javascript:

    $('.slider-wrap').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        asNavFor: '.thumbnail-nav',
        infinity: false,
    });
    $('.thumbnail-nav').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        asNavFor: '.slider-wrap',
        arrows: true,
        dots: true,
        centerMode: false,
        swipeToSlide: true,
        focusOnSelect: true,
        infinity: false,
        responsive: [{
            breakpoint: 420,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 1,
                dots: false,
            }
        }]
    });
    
    $('.slider-wrap').slickLightbox({
        src: 'src',
        itemSelector: '.item-image img',
        lazy: true,
    });
    
    $(document).ready(function () {
        $('.slider-wrap').slickLightbox().on({
            'shown.slickLightbox': function () {
                const btn = document.querySelector(".slick-next");
                btn.addEventListener("click", function () {
                    console.log("Clicked next");
                })
            },
        });
    });

Here I am trying to trigger the arrow buttons, but those are obviously reserved by Slick itself because it did nothing when I clicked. My idea is to display the count of slides and after every click on the arrow show the position of current slide by displaying its slide-index. For example, 3(curr slide)/10(slides). This functionality is almost on every lightbox out there. Any ideas?