Multirow Slick slider sync - Unable to add slick-current class to active slide

Question

I'm using Slick slider 1.9.0 and trying to sync one-slide slick with the one with multiple rows. I have managed to do that but I have faced with another issue. Slick-current class wraps all items inside one row instead of wrapping only active item. It doesn't move from there no matter which slide I click

See the issue:

I have stylized slick-current class to be with opacity 0.7 so we can recognize which slide is the active one. Currently, as you can see, since slick-current class wraps whole row, all items inside that row are with opacity 0.7 instead of the active one only.

Here is my current code:

$(function () {

    $('.slick').slick({
        autoplay: true,
    });
    var $sliderfor = $(".slick.slider-for");
    var $slidernav = $(".slick.slider-nav");
    var $div = $slidernav.find("div");
    var killit = false;

    $div.on("click", function (e) {
        if (!killit) {
            e.stopPropagation();
            var idx = $(this).data("thumb");
            $sliderfor.slick("goTo", idx - 1);
        }
    });

    // need to register a flag that doesn't let us click the slider
    // as we are trying to swipe it.

    $slidernav
        .on("beforeChange", function () {
            killit = true;
        }).on("afterChange", function () {
            killit = false;
        });

    $sliderfor.not('.slick-initialized').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        //trigger after the slide appears
        // i is current slide index
        onAfterChange: function (slickSlider, i) {
            //remove all active class
            $slidernav.removeClass('slick-current');
            //set active class for current slide
            $slidernav.eq(i).addClass('slick-current');
        }

    });


    //set active class to first slide
    $slidernav.eq(0).addClass('slick-current');

});

.container {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    .row {
        display: flex;
        flex-wrap: wrap;
    }
    .col {
        position: relative;
        width: 50%;
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }
    .slick img {
        max-width: 100%;
        height: auto;
        display: block;
        width: 100%;
    }
    .slider-nav .slick-current {
        opacity: 0.7;
    }
     .slider-for .slick-prev, .slider-for .slick-next {
        position: absolute;
        bottom: -20px;
    }
    .slider-nav .slick-current {
        opacity: 0.7;
    }
    .slider-for .slick-next {
        margin-left: 100px;
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col">
            <div class="slick slider-for" data-slick='{"arrows": true }'>
                <div><img src="http://place-hold.it/350x150?text=1" /></div>
                <div><img src="http://place-hold.it/350x150?text=2" /></div>
                <div><img src="http://place-hold.it/350x150?text=3" /></div>
                <div><img src="http://place-hold.it/350x150?text=4" /></div>
            </div>
        </div>
        <!-- /.col -->
        
        <div class="col">
            <div class="slick slider-nav" data-slick='{"slidesToShow": 2, "rows":2, "arrows": false }'>
                <div data-thumb="1"><img src="http://place-hold.it/350x150?text=1" /></div>
                <div data-thumb="2"><img src="http://place-hold.it/350x150?text=2" /></div>
                <div data-thumb="3"><img src="http://place-hold.it/350x150?text=3" /></div>
                <div data-thumb="4"><img src="http://place-hold.it/350x150?text=4" /></div>
            </div>
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</div>
<!-- /.container -->