Slick.js, slider sync with beforeChange

问题:

I have a problem with setting slick carousel in mode with sync navigation, to work like this:

First transition https://imgur.com/a/Lq1nn

Second transition https://imgur.com/a/ywL3D

Third transition https://imgur.com/a/SbBbf

The way I am doing it now, does not working as it should.

    $main_topic_slider.on('beforeChange', function(currentSlide){
        $main_topic_nav.slick('slickGoTo', currentSlide + 1);

    console.log('SLIDER:'+$main_topic_slider.slick('slickCurrentSlide'));
    console.log('NAV:'+$main_topic_nav.slick('slickCurrentSlide'));
    });

Slides behaviour not as they supposed:

SLIDER:0 NAV:1

SLIDER:0 NAV:1

SLIDER:1 NAV:2

SLIDER:0 NAV:1

SLIDER:1 NAV:2

Here is the way I initialize:

    var settings_main_topic = {
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: false,
        autoplay: true,
        autoplaySpeed: 8000,
        asNavFor: $main_topic_nav,
        cssEase: 'cubic-bezier(.25,.46,.45,.94)',
        speed: 1000,
        initialSlide: 0
    },

    settings_main_topic_nav = {
        slidesToShow: 2,
        slidesToScroll: 1,
        arrows: false,
        focusOnSelect: false,
        autoplay: true,
        autoplaySpeed: 8000,
        asNavFor: $main_topic_slider,
        cssEase: 'cubic-bezier(.25,.46,.45,.94)',
        speed: 1000,
        initialSlide: 1
    }

I would appreciate if anyone could help me with this.