滑动灯箱-添加号码导航

如何解决滑动灯箱-添加号码导航

我正在尝试将数字导航添加到滑动灯箱中，但是我不知道如何操作。这是我的代码（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>

我使用PHP是因为我想在我的WordPress网站中显示它。

JavaScript：

    $('.slider-wrap').slick({
        slidesToShow: 1,slidesToScroll: 1,arrows: false,fade: true,asNavFor: '.thumbnail-nav',infinity: false,});
    $('.thumbnail-nav').slick({
        slidesToShow: 3,asNavFor: '.slider-wrap',arrows: true,dots: true,centerMode: false,swipetoSlide: true,focusOnSelect: true,responsive: [{
            breakpoint: 420,settings: {
                slidesToShow: 3,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");
                })
            },});
    });

在这里，我试图触发箭头按钮，但是那些按钮显然是Slick自己保留的，因为单击时它什么也没做。我的想法是显示幻灯片的数量，每次单击箭头后，通过显示其slide-index来显示当前幻灯片的位置。例如，3(curr slide)/10(slides)。几乎每个灯箱都具有此功能。有什么想法吗？