Slick Slider - 在多个滑块上显示计数器

如何解决Slick Slider - 在多个滑块上显示计数器

我的首页上有多个光滑的滑块。现在我想添加一个计数器来显示当前幻灯片和最大幻灯片。

例如，id 为 33 的滑块有 4 个图像，因此它应该显示 1 of 4，并且在转到下一张幻灯片时它应该显示 2 of 4。它已经在工作，但是当我在滑块上滑动时，首页上的所有其他幻灯片也会上升 1。它应该只发生在我改变的滑块上。

这是我目前使用的代码：

$('.image-slider').each(function (key,item){
    var id = $(this).attr("id");

    var sliderId = '#' + id;
    var appendArrowsClassName = '#' + id + 'slider__arrows';

    var $status = $('.slider-paging');

    $(sliderId).on('init reInit afterChange',function(event,slick,currentSlide,nextSlide){
        //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
        var i = (currentSlide ? currentSlide : 0) + 1;
        $status.text(i + '/' + slick.slideCount);
    });

    $(sliderId).slick({
        infinite: true,dots: false,appendArrows: (appendArrowsClassName),prevArrow: '<div class="left d-inline-block"><i class="fas fa-caret-circle-left"></i></div>',nextArrow: '<div class="left d-inline-block"><i class="fas fa-caret-circle-right"></i></div>'
    });
});

非常感谢！