jquery - 光滑的滑动 slider 计数器问题

Question

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

这是我正在使用的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>

这里是 jsfiddle

Answer 1

只需对您的 fiddle 进行一点小改动就足以解决问题。这是 working fiddle

问题出在这行代码上

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

而且必须修复它。