Slick Bug #1563

Synced slider with all slides shown does not advance "current"

HTML

<script src="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css">
<div id="first-slider" class="my-container">
    <div class="slider-container">
        <div class="slider slider-1">
            <div class="featured-slide featured-slide-1">NUMBER: 1
                <br />This is the first slider item.
                <br />Lorem ipsum dolor sit amet.</div>
            <div class="featured-slide featured-slide-1">NUMBER: 2
                <br />This is the second slider item.
                <br />Lorem ipsum dolor sit amet.</div>
            <div class="featured-slide featured-slide-1">NUMBER: 3
                <br />This is the third slider item.
                <br />Lorem ipsum dolor sit amet.</div>
            <div class="featured-slide featured-slide-1">NUMBER: 4
                <br />This is the fourth slider item.
                <br />Lorem ipsum dolor sit amet.</div>
        </div>
    </div>
    <div class="slider-nav-container">
        <div class="wrapper">
            <div class="slider-nav slider-nav-1">
                <div class="slide-link slide-link-1"> <span class="nav-num">1</span><span class="nav-title">FIRST SLIDE</span>

                </div>
                <div class="slide-link slide-link-1"> <span class="nav-num">2</span><span class="nav-title">SECOND SLIDE</span>

                </div>
                <div class="slide-link slide-link-1"> <span class="nav-num">3</span><span class="nav-title">THIRD SLIDE</span>

                </div>
                <div class="slide-link slide-link-1"> <span class="nav-num">4</span><span class="nav-title">FOURTH SLIDE</span>

                </div>
            </div>
        </div>
    </div>
</div>
<div id="second-slider" class="my-container">
    <div class="slider-container">
        <div class="slider slider-2">
            <div class="featured-slide featured-slide-2">NUMBER: 1
                <br />This is...

CSS

* {
    position: relative;
    box-sizing: border-box;
    outline: none;
}
.my-container {
    width: 400px;
    max-width: 400px;
    overflow: hidden;
    margin: 50px auto;
}

.arrow {
    position: absolute;
    bottom: 10px;
    background: white;
    padding: 5px;
    cursor: pointer;
}
.feat-prev {
    left: 10px;
}
.feat-next {
    right: 10px;
}
.slider-container {
    background: #cccccc;
    height: 200px;
}
.slider-container .slider {
    height: 100%;
    padding: 10px;
}
.slider-nav-container {
    background-color: #e8e8e8;
}
.slider-nav-container .slide-link {
    text-align: center;
    cursor: pointer;
}
.nav-num, .nav-title {
    display: block;
}
.slick-current .nav-num, .slick-current .nav-title {
    color: purple;
}

JavaScript

jQuery(document).ready(function ($) {

    $('.slider-1').slick({
        slidesToShow: 1,
        prevArrow: '<div class="arrow feat-prev">&larr;</div>',
        nextArrow: '<div class="arrow feat-next">&rarr;</div>',
        slide: '.featured-slide-1',
        asNavFor: '.slider-nav-1',
        fade: true,
        autoplay: true,
    });

    $('.slider-nav-1').slick({
        slidesToShow: 4,
        slide: '.slide-link-1',
        asNavFor: '.slider-1',
        arrows: false,
        focusOnSelect: true,
    });

    $('.slider-2').slick({
        slidesToShow: 1,
        prevArrow: '<div class="arrow feat-prev">&larr;</div>',
        nextArrow: '<div class="arrow feat-next">&rarr;</div>',
        slide: '.featured-slide-2',
        asNavFor: '.slider-nav-2',
        fade: true,
        autoplay: true,
    });

    $('.slider-nav-2').slick({
        slidesToShow: 2,
        slide: '.slide-link-2',
        asNavFor: '.slider-2',
        arrows: false,
        focusOnSelect: true,
    });
    
    $('.slider-2').on('beforeChange', function(event,slick,slide,nextSlide) {
        $('.slider-nav-1').find('.slick-slide').removeClass('slick-current').eq(nextSlide).addClass('slick-current');
    });

});