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

Posted 2023-05-07

【中文标题】Slick Slider - 在多个滑块上显示计数器

【英文标题】：Slick Slider - Display counter on multiple sliders

【发布时间】：2021-09-12 18:37:47

【问题描述】：

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

例如，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>'
    );
);

非常感谢！

【参考方案1】：

试试这个：

-JS

var cnt = 1;
$(".slider").each(function () 
    $(this).attr('id', function (index) 
        return "sld-" + cnt;
    );
    cnt++;
);

$('.slider').each(function(key, item)
    var id = $(this).attr("id");
    var sliderId = '#' + id;

    if ($(sliderId).length) 
        
        var currentSlide;
        var slidesCount;
        var sliderCounter = document.createElement('div');
        sliderCounter.classList.add('slider-counter');

        var updateSliderCounter = function(slick, currentIndex) 
        currentSlide = slick.slickCurrentSlide() + 1;
        slidesCount = slick.slideCount;
        $(sliderCounter).text(currentSlide + '/' +slidesCount)
        ;

        $(sliderId).on('init', function(event, slick) 
            $(sliderId).append(sliderCounter);
        updateSliderCounter(slick);
        );

        $(sliderId).on('afterChange', function(event, slick, currentSlide) 
        updateSliderCounter(slick, currentSlide);
        );

        $(sliderId).slick(
            slidesToShow: 1,
            dots: false,
            adaptiveHeight: true,
        );
    
);

-html

<div class="slider">
  <img>
  <img>
  <img>
</div>

-CSS

.slider-counter 
                    position: absolute;
                    font-size: 20px;
                    letter-spacing: 2px;
                    font-weight: 400;
                    top: 5px;
                    left: 45px;
                    z-index: 11;
                    pointer-events: none;