在 slick.js 中添加幻灯片计数

Question

我正在使用 Slick.js 在我的页面上显示幻灯片。 它按预期工作，但是我试图在 slider 的底部添加一个 slider 计数器，如果显示第一张幻灯片，则显示 1/4，如果显示第二张幻灯片，则显示 2/4，等等。我尝试使用dotsClass: 'custom_paging' function 但是这显示了 4 个中的 1 个、4 个中的 2 个作为列表，而不仅仅是 1/4 或 2/4 等，具体取决于显示的幻灯片。

代码：

$(document).ready(function () {
    $('.project-carousel').slick({
        centerMode: true,
        infinite: true,
        centerPadding: '40px',
        slidesToShow: 3,
        dots: true,
        dotsClass: 'custom_paging',
        customPaging: function (slider, i) {

            var slideNumber = (i + 1),
                totalSlides = slider.slideCount;
            return slideNumber + ' of ' + totalSlides;
        },
        responsive: [{
                breakpoint: 768,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 3
                }
            },
            {
                breakpoint: 480,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 1
                }
            }
        ]
    });
    $('.slick-slider').on('click', '.slick-slide', function (e) {
        e.stopPropagation();
        var index = $(this).data("slick-index");
        if ($('.slick-slider').slick('slickCurrentSlide') !== index) {
            $('.slick-slider').slick('slickGoTo', index);
        }
    });


});

演示小提琴

Answer 1

实际上，我已经找到了解决方案，并在下面添加了以下代码：

var $status = $('.counter-info');
var $slickElement = $('.project-carousel');

$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.html( '<span class="current_slide">' + i + '</span> / <span class="total_slides"> ' + slick.slideCount + '</span>');
});

演示：