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

【问题标题】：Slick Slider - Display counter on multiple slidersSlick Slider - 在多个滑块上显示计数器
【发布时间】：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>'
    });
});

非常感谢！

【问题讨论】：

标签： javascript jquery slick.js

【解决方案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;
                }

【讨论】：