Jquery 滑溜滑块计数器问题

我在我的网页上使用滑条。我在一个页面中使用多个滑块。每个滑块都工作正常。我还在滑块底部添加了一个滑块计数器。但是，如果我转到滑块的下一张幻灯片，计数器似乎会在每张幻灯片上生效。同时,。例如，如果我在第一张幻灯片上转到下一张幻灯片，它会在每个滑块中显示4个滑块中的2个，而不仅仅是第一个滑块

下面是我正在使用的jquery

$(document).ready(function () {
    var $status = $('.slider_tag span');
    var $slickElement = $('.modules');

    $slickElement.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 + ' of ' + slick.slideCount);
    });


    $slickElement.slick({
        slide: '.module_wrap',
        autoplay: false,
        dots: false,
        arrows: true,
    });
});

这是html

<div class="modules col-md-5">
    <div class="module_wrap">
        <div class="mods">
            <a href="single.html"><img src="images/slide.png" alt=""></a>
        </div>
    </div>
    <div class="module_wrap">
        <div class="mods">
            <a href="single.html"><img src="images/slide.png" alt=""></a>
        </div>
    </div>
    <div class="module_wrap">
        <div class="mods">
            <a href="single.html"><img src="images/slide.png" alt=""></a>
        </div>
    </div>
    <div class="module_wrap">
        <div class="mods">
            <a href="single.html"><img src="images/slide.png" alt=""></a>
        </div>
    </div>
    <div class="slider_tag">Slide <span> </span></div>

</div>

滑动

---

这里是

只要在小提琴上稍作改动就足以解决问题。这是你的电话号码

问题在于这行代码

 $status.text(i + ' of ' + slick.slideCount);

其中，

$status

为

  var $status = $('.slider_tag span');

这意味着所有的span标记，并且您正在为任何carousel next slide事件更新所有span标记。所以唯一的事情就是将这行代码更改为

$(this).find('.slider_tag span').text(i + ' of ' + slick.slideCount);

---

而且它必须是固定的。

你能添加一个JSFIDLE吗？添加了JSFIDLE。谢谢你的回答，如果对你有帮助，请告诉我。