Question

我在网页中使用光滑的滑块。我在一个页面中使用多个滑块。每个滑块都工作正常。我还在滑块的底部添加了滑块。但似乎如果我转到滑块的下一张幻灯片，计数器将在每张幻灯片上生效。同时。例如，如果我在第一张幻灯片上转到下一张幻灯片，则在每个滑块中显示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>

这是jsfiddle

Answer 1

你的小提琴只是一个小小的变化就足以解决这个问题了。这是working fiddle

问题在于这行代码

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

其中$status是

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

这意味着所有span标记，并且您正在更新任何轮播下一个幻灯片事件的所有span标记。所以唯一的事就是改变这行代码

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

必须修复。

光滑的滑块滑块计数器问题

1 个答案: