Slick slider counter not working on init, how to fix?

Question

JavaScript

I use Slick for the slider. You need to make a counter under the slides in the form 01/8...02/8.
Found an implementation on stackoverflow.
With init, the counter is empty, and by clicking on the arrows, the counter starts working from position 1/2 and then everything is ok. Why is it empty during init, how to fix it?

var $mastersViewImages = $('.masters-view__list_images');
var $mastersViewImagesCounter = $('.masters-view__arrows-counter');
$mastersViewImages.slick({
    asNavFor: '.masters-view__list_content',
    nextArrow: '.masters-view__arrows-button_next',
    prevArrow: '.masters-view__arrows-button_prev',
    fade: true
});
$mastersViewImages.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
    var i = (currentSlide ? currentSlide : 0) + 1;
    $mastersViewImagesCounter.html('<span class="masters-view__item-current-num">' + i + '</span>' + '<span class="masters-view__item-all-num">' + slick.slideCount + '</span>');
});

Answer 1

First you initialize the slider, and then you hook up the initialization handler. Clever, don't say anything.
Swap - first on, then slick.