Slick Slider轮播计数器初始化不显示首张幻灯片计数问题求助

你开发的带计数功能的Slick Slider轮播组件，目前可正常显示幻灯片总数，但首次加载初始化时无法显示首张幻灯片的计数，只有切换到第二张幻灯片后计数功能才激活，切回首张时计数恢复正常。问题核心在于初始化事件init中仅设置了总数，未同步设置首张幻灯片的当前计数。

修复方案 #

在init事件处理函数中，添加设置当前激活幻灯片计数的代码，利用Slick初始化完成后默认的首张索引（从0开始），直接计算并赋值即可。

修改后的JavaScript代码：

const addZeroPad = (val) => val.toString().padStart(2, "0");

$('.gallery').each(function (index, sliderWrap) {
    const $module = $(this);
    const $slider = $module.find(".gallery__slides");
    const $slides = $slider.find(".gallery__item");
    const $numbersElem = $module.find(".gallery__counter");
    const $totalNumElem = $module.find(".gallery__counter .gallery__amount");
    const $activeNumElem = $module.find(".gallery__counter .gallery__count");

    if ($slides.length) {
        $slider.on("init", function(event, slick) {
            console.log(slick.$slides.length);
            $totalNumElem.text(addZeroPad(slick.$slides.length));
            // 新增：初始化时设置首张幻灯片的计数
            $activeNumElem.text(addZeroPad(slick.currentSlide + 1));
            $numbersElem.show();
        });

        $slider.on("afterChange", function(event, slick, currentSlide, nextSlide) {
            $activeNumElem.text(addZeroPad(currentSlide + 1));
        });

        $slider.slick({
            dots: false,
            arrows: false,
            speed: 700,
            infinite: false,
            centerMode: true,
            centerPadding: '1%',
            slidesToShow: 1,
            autoplay: true,
            autoplaySpeed: 2000,
            draggable: true,
            pauseOnHover: false,
            variableWidth: false,
        });
    }
});

原理说明 #

Slick的init事件在轮播初始化完成后触发，此时轮播的当前幻灯片索引slick.currentSlide默认值为0（对应首张幻灯片），将该值加1转为人类习惯的从1开始的序号，再通过addZeroPad格式化后赋值给计数元素，就能实现首次加载时直接显示正确的首张计数。

内容的提问来源于stack exchange，提问作者probablybest